【Vue 全解 0】Vue 实例 【Vue 全解 1】构造选项 options 之 data 【Vue 全解 2】Vue 模板语法摘要 【Vue 全解 3】Vue 的 data 代理和数据响应式 【Vue 全解 4】options 之生命周期钩子（created、mounted、updated、destroyed） 【Vue 全解 5】options 之 DOM（el、template、render） 【Vue 全解 6】options 之资源（directive、filter、components）和修饰符 【Vue 全解 7】options 之组合（mixin、extends、provide/inject） 【Vue 全解 8】Vue 表单输入绑定 v-model
取值有：红色表示易懂好理解，黄色属性表示稍微难一点，蓝色表示不常用。
datapropsmethodscomputedwatchpropsDatadata 为内部数据，有两种类型：对象或函数（优先使用函数）
限制：组件的定义只接受函数
使用data实现定义初始化的数据 new Vue({ data:{ n:100 }, /* 或者 */ data(){ return { n:100 } }, })props为外部数据，也叫做属性,用来主组件和副组件之间的传值。既然是主副组件之间，肯定需要使用compoents组件来演示了。
类型：Array<string> | object
利用props实现主副组件之间的传值和调用函数props的组件 /* 假设该组件代码的文件名为：Demo-props.vue 。使用的Vue为完整版Vue*/ <template> <div class='blue'> 这是Demo-props <br> <div><span>{{msg1}}</span></div> <div><span>{{msg2}}</span></div> <button @click='fn'>call main's fn<button/> </div> </template> <script> export default { props:['msg1','msg2','fn'], } </script> <style scoped> .blue { color:blue; } </style> 主函数 import props from './components/Demo-props'; //导入组件 new Vue({ components:{props}, //ES6新语法，直接使用props名称的组件 data(){ return { n:0 } }, /* props 传值 1. 前面不加 ":",表示msg只是一段字符串。 2. 前面加 ":",表示msg的内容是一段JS代码。 */ template:` <div class='red'> {{n}} <h2>这是props组件</h2> <props msg2="你好 props":msg1='n' :fn='add'/> </div> `, methods:{ add(){ this.n++; } } }).$mount('#app') //挂载到页面上id为app的div盒子上。事件处理函数或者普通函数全部都放在methods里面
类型：Function | [key:string]
利用methods实现简单的函数功能 new Vue({ data(){ return { n:0 } }, template:` <div class="red"> {{n}} <button @click='add'>点击+1</button> </div> `, methods:{ add(){ this.n+=1; } }, })computed 计算属性, 不需要加括号，它会根据依赖是否变化缓存。
类型：[key:string]:Function | Function | {get:Function,set:Function}
使用computed实现显示数据 new Vue({ data:{ uesr1:{ email: 'bigHansomeBoy111@me.com', nickname:'code111', phone:'18888888888', //手机号最好用字符串存！ }, uesr2:{ email: 'bigHansomeBoy222@me.com', nickname:'code222', phone:'18888888888', } }, computed:{ /* 当user的属性变化后，就会重新渲染更新界面 */ displayName1(){ const user=this.user1; return user.nickname||user.email||user.phone; }, /* getter/setter */ displayName2(){ get (){ const user=this.user2; return user.nickname||user.email||user.phone; } set (name){ this.user2.nickname=name; } } } template:` <div class="show"> {{displayName1}} <div> {{displayName2}} </div> <button @click='setName'>set</button> </div> `, methods:{ setName(){ this.displayName2='刘德华'; } } }).$mount('#app')监听data,一旦data变化，就执行的函数。注意默认第一次的值(就是给变量属性赋初始值时，从无到有)不监听，改变了才会重新渲染。
类型：{ [key: string]: string | Function | Object | Array }
相关API：options.watch | this.$watch | deep,immediate
更多watch语法
利用watch监听实现撤销功能或模拟computed(不建议) new Vue({ data:{ n:0, history:[{from:0,to:0}], inUndoMode:false, //一个判断是否在撤销模式的标志 user:{ email: 'bigHansomeBoy111@me.com', nickname:'code111', phone:'18888888888', }, displayName:'ss', }, created(){ /* 用法与options的watch一样，这是在里面使用的$watch */ this.$watch('n',function() { console.log('user变了'); },{deep:true}) }, watch:{ n(newValue,oldValue){ if(!this.inUndoMode){ this.history.push({from:oldValue, to:newValue}) } }, 'user.email': { handler() { console.log('email变了'); const { user: { email, nickname, phone } } = this; this.displayName = email || nickname || phone; }, immediate:true, //第一次给变量或者属性赋值的过程也要监听，即变量或者属性从无到有的过程。 }, user:{ handler(){ console.log('user变了'); }, deep:true, //只要user对象里面的属性变量变化，就认为user也进行了变化。默认为false } }, template:` <div> {{n}} <hr/> <button @click='add1'>+1</button> <button @click='add2'>+2</button> <button @click='minus1'>-1</button> <button @click='minus2'>-2</button> <hr/> <button @click='Undo'>撤销</button> {{history}} <hr/> <div>下面是immediate的演示</div> </div> `, methods:{ add1(){ this.n+=1; }, add2(){ this.n+=2; }, minus1(){ this.n-=1; }, minus2(){ this.n-=2; }, Undo(){ const last=this.history.pop(); const old=last.from; this.Undo=true; this.n=old; //注意watch是异步的 /* 这是Vue自己封装的异步函数，与watch的异步是同级别的，所以这个函数是在watch后再执行。 */ this.$nextTick(()=>{ this.inUndoMode=false; },0) } } })创建实例时传递props,主要用于方便测试
let Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) let vm = new Comp({ propsData: { msg: 'hello' } })