Vue常用指令总结

v-once

• 该指令表示元素和组件值渲染一次，不会随着数据的改变而改变

    
{{firstName+lastName}}

v-html

• 该指令后面往往会跟上一个string类型，会将string的html解析出来并渲染
• 如果服务器直接返回了一个html代码，可能会用到该指令

v-text

• v-text作用与mustache比较相似，都是用于将数据显示在界面上，通常接收一个string类型
• v-text指令接收的内容会将后面的文本给覆盖掉，因此该指令很少用

       
    
hello

v-pre

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法
• 该指令与pre标签很相似，往里面写的是什么，就会原封不动的展示出什么

    
    
{{message}}

v-cloak

• cloak：斗篷，遮蔽物
• 在某些情况下，我们浏览器可能会直接显示出未编译的mustache
• 在Vue解析之前，div中有一个属性v-cloak，在Vue解析之后，该属性就会被删除

	
{{message}}

v-if

• v-if、v-else-if、v-else这三个指令与JavaScript中的if、else、 else if即为相似
• Vue中的这三个条件指令会根据表达式的值在DOM中渲染或销毁元素或组件

    
优秀
    
良好
    
及格
    
不及格

data: {
    score: 88
}

// 结果：良好

v-show

• v-show与v-if极为相似，也是决定了一个元素或组件是否渲染，不同的是：

  • v-if后面的条件为false时，根本不会有对应的标签出现在DOM中
  • v-show后面的条件为false时，仅仅是将元素的display属性设置为none而已

• 当某个组件或元素需要频繁的显示或隐藏时，应选择v-show，而当该组件或元素只需要渲染一次时，选择v-if

我太优秀了

v-bind

• v-bind指令较为复杂且很常用，因此单独作为一个文件讲解，

v-on

v-for

v-model