vue 指令

　　1. 计算属性 computed

　　　　

　　2. 监听属性 watch

　　　　

　　注意事项：

　　　　watch 中的方法名是对应的属性，当这个属性发生变化时，就会触发相对应的函数

　　3. :class 和 :style 讲解

　　　　1. :class = "a"

　　　　说明 vue 中有个叫 a 的属性 ，这个标签的 class 就是 a 的值

　　　　2. :class = "{a:b}"　　// a 是类名，b 是值

　　　　a 的存在取决于 b 的值，为 true 就说明存在，为 false 就说明不存在

　　　　案例：true 和 false 来回切换

　　　　@click = 'b=!b'　　// ! 取反 

　　　　3. :class = ['a',b]　　// 带引号是 类名，不带引号是变量　　a 是类名　　b 就是变量

　　　　注意点：就在数组元素带不带引号的问题，带了说明是类名，不带就是 data 的属性对应的值

　　4. :style="{color:co,bacnground:ba}"　　// 在 vue 中 style 是一个 js 对象

　　　 data:{　　// 在上面的案例中 data 在什么地方　　在 vue 的实例中

　　　　co:"blue",

　　　　ba:"green"

　　　}

　　注意：style 中是一个对象，中间要用，隔开，前者是 style 中的属性，值是 data 中对应的数值

　　v-if="a"　　// 代表 a 是 true ，对应的元素就显示，为 false 对应的元素就隐藏

　　v-if  和 v-else 的用法

　　

　　v-if 和 v-else-if 和 v-else-if  的用法

　　

　　v-show 与 v-if 的区别？

　　　　v-show 是 display：none 与 block 之间的切换

　　　　v-if 是 添加元素 与 删除元素之间的切换

　　v-for 的使用

　　　　1. 值是一个数组的用法 (item,index) in arr　　// item 代表元素　　index 代表索引

　　　　

　　　　2. 值是一个对象的用法 （val,key）in obj　　// val 代表属性值，key 代表属性

　　　　

　　事件监听 v-on　　缩写 @

　　 　　简单的点击事件

　　　　

　　表单 v-model 数据绑定

　　　　可以在表单时，使用 v-model 实现数据双向绑定 

　　文本框的数据双向绑定

　　

　　复选框的数据双向绑定

　　

 　　单选框的双向绑定

　　正常情况下的 radio 用法

　　

　　双向绑定式用法

　　

 

转载于:https://www.cnblogs.com/shangjun6/p/11233368.html