vue | 易学教程

vue项目中遇到的一些问题

阅读更多关于 vue项目中遇到的一些问题

或访问： https://github.com/littleHiuman/experiences-about-vue 求点star呀~~ 欢迎补充！ vuex 状态 vue-cli 命令行 vue vue vue-router 路由 es6 eslint Js写法规范。 eslint常见问题 brace-style？ no-sequences？ block-spacing？比较时，使用全等号所有的switch语句都必须要有一个default分支 yoda：yoda条件语句就是对象字面量应该写在比较操作符的左边，而变量应该写在比较操作符的右边（默认的规则要求，变量写在左边而字面量写在右边）个别符号以及关键字之间需要空格（比如function，逗号，大括号，运算符）逗号在行尾出现/行首不以新行开始的块 { 前面要不要有空格立即调用函数的写法： (function() {　　// body }()); 只能使用单引号最后必须有一行空行，不能有多余空行不能有多余空格空位/制表符距离为2 可以设置带分号，否则js中不能带分号。 "semi": [2, "always"] 不能定义了却未使用的变量 alias中定义的简称只能用于js部分。模块必须有一个根元素整个页面有切换动画，那么页面的根元素不能有其他样式影响 Vue实例中最后一个属性末不需要加逗号

vue中的事件修饰符

阅读更多关于 vue中的事件修饰符

1.stop 阻止事件冒泡 2.prevent 阻止默认事件发生 3.capture 当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 4.passive 不拦截默认事件，每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。 5.self 加了self元素的事件，只有自身触发才会执行回调，不执行冒泡过来的事件。 6.once 只触发一次回调 7.native 监听组件根元素的原生事件，在父组件中给子组件绑定一个原生的事件，不加'. native'事件是无法触发，可理解为把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用。来源： https://www.cnblogs.com/thinkguo/p/12447204.html

Vue2学习笔记:class和style

阅读更多关于 Vue2学习笔记:class和style

1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ color:'color', //值color是定义的样式名 background:'background', test:{color:"#666", fontWeight:"bold"} }, }); } </script> <style type="text/css"> .color{color: #000} .background{background: #ccc} </style> </head> <body> <div id="box">   <span v-bind:class="color">方式1</span> 等价 <span :class="color">方式1</span> <br> <span v-bind:class="[color,background]">方式2</span> <span v

Vue方式自动打开浏览器配置

阅读更多关于 Vue方式自动打开浏览器配置

Vue方式自动打开浏览器配置 1. 通过 package.json 配置项目 // 必须是符合规范的json语法 "vue": { "devServer": { "port": "8888", "open" : true } }, 注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。 2. 通过单独的配置文件配置项目 // vue.config.js module.exports = { devServer: { port: 8888 } } ① 在项目的跟目录创建文件 vue.config.js ② 在该文件中进行相关配置，从而覆盖默认配置来源： https://www.cnblogs.com/dlm17/p/12446666.html

vue 组件

阅读更多关于 vue 组件

1.组件的定义及意义：以UI的角度来划分，方便复用 2.全局组件的使用介绍： //2.1：使用组件构造器，新建一个选项对象var com1=Vue.extend({　　template:'<h1>com1</h1>'})//2.2:注册组件：Vue.component()方法的两个参数，第一个是组件的名称，第二个参数是选项对象Vue.component('mycom1',com1) //2.3在vue的实例的作用范围内使用组件<mycom1></mycom1>//2.4一些简便方法的合并写法：将前两步的合并写法Vue.component('mycom1',{template:'<h1>mycom1</h1>'}) 来源： https://www.cnblogs.com/onlyx/p/12446668.html

Vue FLIP简单实现及理解

阅读更多关于 Vue FLIP简单实现及理解

//HTML < script src = " https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js " > </ script > < div id = " list-complete-demo " class = " demo " > < button v-on: click = " shuffle " > Shuffle </ button > < button v-on: click = " add " > Add </ button > < button v-on: click = " remove " > Remove </ button > < transition-group name = " list-complete " tag = " p " > < span v-for = " item in items " v-bind: key = " item " class = " list-complete-item " > {{ item }} </ span > </ transition-group > </ div > //JS new Vue ( { el : '#list-complete-demo' , data : { items : [ 1 , 2 , 3 ,

vue父组件主动获取子组件的数据和方法

阅读更多关于 vue父组件主动获取子组件的数据和方法

父组件主动获取子组件的数据和方法： 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法 <template>  <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> </template> ------------------------------------------------------------------- methods:{ run(){ alert('我是Home组件的run方法'); }, getChildData(){ //父组件主动获取子组件的数据和方法： // alert(this.$refs.header.msg);//数据 this.$refs.header.run();//方法 } } 来源： https://www.cnblogs.com/sulanlan/p/9932984.html

vue视频学习笔记06

阅读更多关于 vue视频学习笔记06

video 6 vue动画 vue路由 -------------------------------------- transition 之前属性 <p transition="fade"></p> .fade-transition{} .fade-enter{} .fade-leave{} -------------------------------------- 到2.0以后 transition 组件 <transition name="fade"> 运动东西(元素，属性、路由....) </transition> class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) 如何animate.css配合用？ <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show"></p> </transition> 多个元素运动: <transition-group enter-active-class=""

Vue学习笔记十三：路由的跳转

阅读更多关于 Vue学习笔记十三：路由的跳转

Vue学习笔记十三：路由的跳转 Vue版本：2.5.21 Vue-router版本：3.1.6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由的跳转</title> </head> <body>  <div id="app"></div> <script src=

Vue 底层编译实现

阅读更多关于 Vue 底层编译实现

kvue源码 // 期待用法 // new KVue({ // data:{msg:'hello'} // }) class KVue { constructor(options) { this.$options = options; //处理data选项 this.$data = options.data; // 响应化 this.observe(this.$data); // new Watcher(); // this.$data.test; // new Watcher(); // this.$data.foo.bar; new Compile(options.el, this); if (options.created) { options.created.call(this); } } observe(value) { if (!value || typeof value !== 'object') { return; } // 遍历对象 Object.keys(value).forEach(key => { this.defineReactive(value, key, value[key]) // 代理到vm上 this.proxyData(key); }) } proxyData(key) { Object.defineProperty(this, key, {

订阅 vue