vue指令大全（vue指令）

1             、文本类指令

　　{{}} 
  
 
  
 
  
 
  
 
  
 
  
 
、v-text 都是用于绑定节点的文本;

　　　　二者区别：{{}}这种绑定值的方式在页面会出现“{{}} 
  
  
  
  
  
  ”一闪而过的效果

　　　　解决{{}}在页面出现一闪而过的办法:

　　v-once 用于指令节点的内容只绑定一次             ，当前节点中所对应的变量变化 
  
 
  
 
  
 
  
 
  
 
  
 
，视图不更新 
  
  
  
  
  
  。

　　　　通常情况下












，v-once只能和{{}}一起用

　　v-html 用于绑定动态的html节点 
  
  
  
  
  
  ，相当于DOM中的innerHTML 
  
  
  
  
  
  
，这个指令默认已经做了"防注入攻击XSS"的处理
  
  
  
  
  
  
 。

　　v-once和v-cloak都不需要接收表达式来作为值

2












、动态属性指令

　　v-bind 用于动态绑定节点属性(如：title,value,class,style等);经常简写成":属性名"

　　v-on 用于给视图绑定各种js事件 
 
 
 
 
 
 ，比如：click 
   
   
   
   
   
   
，mouseenter,blur等,简写成: "@事件名"

　　事件修饰符：.stop 阻止冒泡 
 

 

 

 

 

 
，.enter等
 

 

 

 

 

 

 ，可以链式调用 
 
 
 
 
 
 。

4 
  
  
  
  
  
  
、表单绑定

　　v-model 用于表单取值（表单双向绑定）            ，比如input/select/textarea等
   
   
   
   
   
   
 。

　　表单三个修饰符：.trim自动去除文本首尾空格

　　　　　　　　　　.number只能输入数字

　　　　　　　　　　.lazy 用于性能 

 
 

 
 

 
 

 
 

 
 

 
 
，当表单失去焦点时再进行双向绑定

5

 


 


 


 


 


 

、列表渲染

　　v-for 用于渲染列表 
 
 
 
 
 
 、对象等
 

 

 

 

 

 

。

6 
   
   
   
   
   
   
、条件渲染

　　v-show 相当于控制节点的display: none/block

　　v-if / v-else-if / v-else 这是真正的移除或插入视图节点












，比较耗费性能,不建议和v-for一起使用 

 

 

 

 

 

 。

　　v-for的优先级比v-if更高             。

7
 

 

 

 

 

 
、其它指令

　　v-pre 用于调试                   ，可以阻止vue编译器对指令的编译

　　v-slot 指定具名插槽