本文共 3900 字，大约阅读时间需要 13 分钟。

下面介绍Vue中集成的指令以及用法和作用

v-bind   v-on   v-model  v-for   v-html   v-text   v-if   v-else-if   v-else   v-show   v-once  v-pre   v-cloak

1、声明式渲染有两种方法

A、文本插值，用两个花括号：{

{内容}}

html如下：

   
        //挂载元el，指定的节点，用id表示  {  { message }}   //vue实例对象中data对象中某个属性名
   

js如下：

var app = new Vue({  el: '#app',    //挂载到DOM节点上，节点的id=app  data: {        //给data对象定义属性message，与html中某个文本对象变量名一致    message: 'Hello Vue!'  }})

输出结果：

这句代码中的两种定义属性的区别，a=''默认值是固定的；而v-bind:a=''的值是可以动态变化的，即动态绑定数据，v-bind:动态变化对象="表达式"，并且可以将数据传递给子组件，子组件通过props属性对象接收

 

B、v-bind（可以简化为：），动态绑定数据，及时对页面的数据进行变更，如V-bind:标签属性="变量名"

html如下：

   
   
      //或者简写：      鼠标悬停几秒钟查看此处动态绑定的提示信息！   
   

js如下：

var app2 = new Vue({    el: '#app-2',    data: {       message: '页面加载于 ' + new Date().toLocaleString()   }})

显示效果如下：

2、v-bind:class，三种绑定方法---

      A、对象型 "{red:isred}" 

      B、三目型"isred?'red':'blue'"

      C、数组型"[{red:'isred'},{blue:'isblue'}]"

A、对象型：

显示结果：

B、三目型：

显示效果：

C、数组型 

显示效果：

3、v-bind:style，绑定内联样式

A、内联样式，对象型

			
   
		
    
     {  {message}}
    
	
   
	

显示效果：

B、直接绑定到一个对象上

			
   
		
    
     {  {message}}
    
	
   
	

显示效果同上

C、数组语法，将多个样式对象应用到同一个元素上

			
   
		
    
     {  {message}}
    
	
   
	

显示效果：

4、条件  v-if  ，显示与隐藏（DOM元素的删除与添加），v-if = "变量名"，在data中用true或false来控制显示和隐藏

html如下：

   
  
    
现在你看到我了
   

js如下：

var app3 = new Vue({  el: '#app-3',  data: {    seen: true   //用true、false来控制能否看见内容  }})

显示结果:

5、条件  v-else-if 必须和v-if连用 ，格式 v-else-if="变量名"

html如下：

js如下：

var appp = new Vue({        el:"#box",        data:{    show:true, hide:false} });

 

显示效果如下：

 

6、条件  v-else 必须和v-if连用，不能单独使用，否则报错：模板编译错误，格式 v-else=""

html如下：

 

js如下：

 

var appp = new Vue({        	el:"#box",        	data:{	    show:true,	    hide:false	}  });

显示效果如下：

7、v-show，显示与隐藏，传递的值为布尔值，默认为false，格式v-show=“变量名”，只是设置display属性，元素还存在DOM中

html如下：

js如下：

new Vue({        el: "#box",        data(){            return {                show: true            }        }    })

显示效果如下：

v-show和v-if都是隐藏和显示DOM节点，区别是v-show是给DOM节点设置display属性，而v-if则是在DOM中增加/删除节点。

v-if：

在浏览器的DOM渲染效果：

v-show:

在浏览器的DOM渲染效果：

8、v-for，循环，绑定数组的数据来渲染一个项目列表，格式 v-for="字段名  in(of) 数组json"

html如下：

   
  
    
    
     
      {  { todo.text }}    
  
    
   

js如下：

var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})

显示效果如下：

9、v-on   绑定事件（处理用户输入）    函数必须写在methods里面，格式v-on:事件名="函数名"，简写@事件名="函数名"

html如下：

   
  
    
{  { message }}
  
    逆转消息
   

js如下：

var app5 = new Vue({  el: '#app-5',  data: {    message: 'Hello Vue.js!'  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('')    }  }})

显示效果：左图是点击按钮签的样式             右图是点击按钮之后的样式

                         

10、v-model，用在表单控件上，用于实现双向绑定数据，如果将v-model用于表单控件以外的标签是没有任何效果的，格式 v-model="变量名",

html如下：

   
  
    
{  { message }}
  
    
   

js如下：

var app6 = new Vue({  el: '#app-6',  data: {    message: 'Hello Vue!'  }})

显示效果：左图是页面初始化结果，右图是在页面直接修改输入框的值的结果

                   

11、v-text，解析文本，能读取文本，但不能解析html标签（就是如果变量值是html的形式给出，那么读出的值也包含html标签）

v-text   属性值为字符串文本

显示结果：

11111

v-text，属性值为字符串html语句

 

显示结果：

 

   
    11111
   

12、v-html，能解析html语句，也能读取文本值

v-html，属性值为字符串html语句

显示结果：

11111

v-html，属性值为字符串文本语句

显示效果：

11111

v-text和v-html两者都能读取文本，但是v-html能解析字符串html语句

13、v-once，进入页面时只能渲染一次，以后不再渲染。如果用到事件中也只执行一次（@click.once="show"）

			
   
    	
    
     {  {msg}}
    
	
   
	

显示效果：

qwdqwdqwd

事件也只响应一次

			
   
    	
    
     {  {msg}}
    
	
   
	

页面初始化效果：

点击false，页面效果

当再次点击的时候，页面没有任何反应

14、v-pre，把标签内的元素原样输出

		
   
    
    
     欢迎---{  {msg}}
    
   
	

显示效果：

15、v-cloak，防止闪烁

		
   
    
    
     欢迎---{  {msg}}
    
   
	

显示效果：