Vue-指令

1. v-text：这个指令用于将vue实例中的data内的属性渲染到标签内。有两种写法：

　　1. `<div v-text="数据"></div>`：该写法会将div内的所有内容清空，然后渲染成对应的数据。

　　2. `<div>{{数据}}</div>`：该写法为v-text的简写，被称为胡子语法或差值语法。该写法只会在{{}}对应的地方渲染数据，而不会改变div内其他位置的内容

　　3. 由上述两个特点可以知道，{{}}更实用，简便，所以用得更多

　　4. 无法识别标签

2. v-html：这个指令与v-text的作用相同，只有一点不同，即可以识别标签

3. v-model：这个指令可以用于input，select，textarea，组件这四种。作用是双向数据绑定，在标签上改变的值会影响到data的数据，data的数据改变也会影响到标签上的值

4. v-show：这个指令用于改变元素的显示/隐藏。当v-show绑定的值为true时，元素显示；反之，隐藏。这个实现是利用display

5. v-if/v-else-if/v-else：这个指令同样可以改变元素的显示/隐藏。当绑定的值为true时，元素显示；反之，隐藏。与v-show不同的是，这个指令改变了DOM树，会将元素改变为注释节点。与v-show的取舍，需要看情景。例如，v-if改变了DOM树，比较耗性能，所以在频繁切换时，会选择使用v-show。

6. v-on：这个指令绑定了事件触发时执行的methods中的方法。

　　1.写法

　　　　1. <div v-on:click="方法名"></div>

　　　　2. <div :click="方法名"></div>

　　2. 当触发时要传入参数，则可以这样写：<div :click="方法（参数）"></div>

　　3. 如果逻辑简单，可以直接用逻辑代码代替方法

　　4. 修饰符：例如：<div :keyup.enter="方法"></div>

7. v-bind：该指令用于修改元素属性，例如<img v-bind:src="" />

　　1. 简写：<img :src="" />

8. v-for：该指令用于循环渲染页面

　　1. 写法：<li v-for="(item, index) in 数据">{{item}}</li>

　　2. 数据：array | object | string | number

9. v-cloak：该指令用于为还没有被vue编译完成的胡子语法添加样式。需要配合css的属性选择器：[v-cloak]来添加样式

10. 还有两个很少用的指令v-once，v-pre

巴特西

Vue-指令

最新文章

热门文章