1、v-text
用来操作当前元素的textContext和innerText属性,会覆盖掉标签中原有的内容。
无法读取文本内的html标签,会当做文本原样输出。
2、v-html
用来操作当前元素的innerHTML文本内容,也会覆盖标签原有的内容。
可以读取文本中的html标签,并且解析显示在页面中。
3、v-if
用来显示和隐藏当前元素,值为true和false。
为true时,表示当前元素被销毁删除;
为false时,表示重新创建生成元素。
注:尽量避免使用,太多Dom的操作会消耗性能,不利于性能优化。
4、v-show
用于设置元素的显示个隐藏。
与v-if不同的是,v-show操作的是css的display属性,
值为true时,设置当前元素的display属性值为“block”,
值为false时,设置当前元素的display属性值为“none”。
5、v-for
用来遍历循环数据。
使用时需要添加一个唯一的key属性,通常使用id或者index。(:key=‘index’或者:key=‘item.id’)。
6、v-on
用来绑定事件。
函数必须写在methods中。
缩写形式:@, 例如,@click。
7、v-bind
用于给DOM元素动态绑定属性。
缩写形式:冒号,例如,:title=‘你好,世界 !’。
在绑定class或style特性时,支持其它类型的值,如数组或对象。也可以进行字符串拼接。代码示例如下:
8、v-model
表单元素上实现双向绑定。
data函数中返回对象用return。
9、 v-pre
设置了这条指令后,这个元素以及它的子元素上的所有内容将不会被解析执行。
10、v-once
设置了这条指令表示元素和组件只渲染一次。随后的重新渲染,元素或组件及其身上的所有子节点将被视为静态内容并跳过。可以用于优化更新性能。
11、.prevent
阻止事件默认行为。
网友评论