Vue指令

Posted 2021-02-19 nanjo4373977

指令系统： 指令中封闭了一些dom行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关dom操作的绑定

1）、v-text 等价于 {{ }}  都是插入值，直接渲染，实现原理：innerText

2）、v-html  既能插入值，又能插入标签，实现原理：innerhtml

3）、v-if  v-else 相当于if else  它是“真正”的条件渲染，因为它会确保在切换条件块内的事件监听器和子组件适当地被销毁和重建，同时它也是惰性的，如果在初始渲染时条件为假，则什么也不做直到条件第一次变为真时，才会开始渲染条件块

4）、v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换，因此如果需要非常频繁的切换，则使用v-show，如果运行条件很少改变，则使用v-if

5）、v-for = ‘(item,index) in menuList’

v-for = ‘(ivalue,key) in object’

item指的是数组中每项元素

6）、v-bind 对页面中标签的属性进行绑定，所有的属性都可以进行绑定，注意只要了v-bind后面的字符串一定是数据属性的值

v-bind:属性名（如class、id）= ‘对象{} | 数组[] | 变量名 | 常量‘

在vue中v-bind可以简写为  :class  :src  :id  等同于 v-bind:class  v-bind:src  v-bind:id

7）v-on 在vue中使用v-on:click对当前DOM绑定Click事件，注意：所有的原生js的事件使用v-on都可以绑定

v-if和v-on对页面中DOM进行操作

v-on简写 v-on:click 等同于 @click=‘方法名’

8）、v-bind:class 和v-on对页面中DOM的样式进行切换

9）、v-model双向数据绑定，应用于文本框、单复选框等，原理：数据驱动视图，反之视图改变了数据也会跟着改变