Vue中集成的指令以及其用法

爱被打了一巴掌 2022-05-29 09:09 229阅读 0赞

**下面介绍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如下：

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

js如下：

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

输出结果：

![Image 1][]

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

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

html如下：

<div id="app-2">
       <span v-bind:title="message">  //或者简写：<span :title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
       </span>
    </div>

js如下：

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

显示效果如下：

![Image 1][]

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

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

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

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

A、对象型：

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    	<style>
            .red {
                background: red;
            }
      
            .blue {
                width: 100px;
                height: 100px;
                background: blue;
            }
        </style>
    </head>
    <body>
    	<div id="box">
         	<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
        	    
         	
    	</div>
    
    	
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                    isred:true
                }
        	})
    
    	</script>
    </body>
    </html>

显示结果：

![Image 1][]

B、三目型：

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    	<style>
            .red {
     
                background: red;
            }
      
            .blue {
                width: 100px;
                height: 100px;
                background: blue;
            }
        </style>
    </head>
    <body>
    	<div id="box">
         	
        	<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>    
         	
    	</div>
    
    	
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                    isred:false
                }
        	})
    
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

C、数组型

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    	<style>       
    	    .red { background: red;}        
    	    .blue { width: 100px;  height: 100px;  background: blue;}    
    	</style>
    </head>
    <body>
    	<div id="box">     	
    		    
    		         	
    		<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
    	</div>
    	<script type="text/javascript">   
    		new Vue({   
    		    el: "#box",        	
    		    data:{                
    		    	isred:true         
    		    }    	
    		})
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

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

**A、内联样式，对象型**

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id='box'>
    		<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{
       {message}}</div>
    	</div>
    	<script type="text/javascript">
    		new Vue({
    		    el:"#box",
    		    data: {
    			   activeColor: 'red',
    			   fontSize: 30,
    			   message:'hello',
    			}
    		})
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id='box'>
    		<div v-bind:style="styleObj">{
       {message}}</div>
    	</div>
    	<script type="text/javascript">
    		new Vue({
    		    el:"#box",
    		    data: {
    				styleObj:{
    					color:'red',
    					fontSize:'30px'
    				},
    			    message:'hello',
    			}
    		})
    	</script>
    </body>
    </html>

显示效果同上

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id='box'>
    		<div v-bind:style="[style1,style2]">{
       {message}}</div>
    	</div>
    	<script type="text/javascript">
    		new Vue({
    		    el:"#box",
    		    data: {
    				style1:{
    					color:'red',
    					fontSize:'30px'
    				},
    				style2:{
    					color:'black'
    				},
    			    message:'hello',
    			}
    		})
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

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

html如下：

<div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>

js如下：

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

显示结果:

![Image 1][]

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

html如下：

js如下：

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

显示效果如下：

![Image 1][]

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

html如下：

js如下：

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

显示效果如下：

![Image 1][]

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

html如下：

js如下：

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

显示效果如下：

![Image 1][]

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

**v-if：**

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
    	    <div style="width: 100px;height: 100px;background: black;display: none" v-if="show"></div>
    	</div>
    	
    	<script type="text/javascript">
    	    new Vue({
    	        el: "#box",
    	        data(){
    	            return {
    	                show: false
    	            }
    	        }
    	    })
    	</script>
    </body>
    </html>

在浏览器的DOM渲染效果：

![Image 1][]

**v-show:**

在浏览器的DOM渲染效果：

![Image 1][]

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

html如下：

js如下：

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

显示效果如下：

![Image 1][]

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

html如下：

<div id="app-5">
      <p>{
       { message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>

js如下：

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

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

![Image 1][]                         ![Image 1][]

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

html如下：

<div id="app-6">
      <p>{
       { message }}</p>
      <input v-model="message">
    </div>

js如下：

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

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

![Image 1][]                   ![Image 1][]

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

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div v-text="msg"></div>
      	</div>
    
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                     msg:" 11111"
            	},
             	methods: {
                 	    say() {
                   	 	alert(111);
                	    }
             	}
        	})
    	</script>
    </body>
    </html>

显示结果：

11111

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div v-text="msg"></div>
      	</div>
    
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                     msg:"<p1>11111</p1>"
            	},
             	methods: {
                 	    say() {
                   	 	alert(111);
                	    }
             	}
        	})
    	</script>
    </body>
    </html>

显示结果：

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

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div v-html="msg"></div>
      	</div>
    
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                     msg:"<p1>11111</p1>"
            	},
             	methods: {
                 	    say() {
                   	 	alert(111);
                	    }
             	}
        	})
    	</script>
    </body>
    </html>

显示结果：

11111

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div v-html="msg"></div>
      	</div>
    
    	<script type="text/javascript">
    	    new Vue({
             	el: "#box",
            	data:{
                     msg:"11111"
            	},
             	methods: {
                 	    say() {
                   	 	alert(111);
                	    }
             	}
        	})
    	</script>
    </body>
    </html>

显示效果：

11111

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

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div v-once>{
       {msg}}</div>
    	</div>
    
    	<script type="text/javascript">
    		new Vue({
    		    el:"#box",
    		    data:{
    	            msg:"qwdqwdqwd" 
    		    }
    		})
    	</script>
    </body>
    </html>

显示效果：

qwdqwdqwd

事件也只响应一次

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id="box">
        	<div @click.once="change">{
       {msg}}</div>
    	</div>
    
    	<script type="text/javascript">
    		new Vue({
    		    el:"#box",
    		    data:{
    	            msg:"false",
    	            flag:1
    		    },
    		    methods:{
    		    	change:function(){
    		    		if(this.flag == 1){
    		    			this.flag = 0;
    		    			this.msg = "true";
    		    		}else{
    		    			this.flag = 1;
    		    			this.msg = "false";
    		    		}
    		    	}
    		    }
    		})
    	</script>
    </body>
    </html>

页面初始化效果：

![Image 1][]

点击false，页面效果

**![Image 1][]**

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

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

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    <div id="box">
        <div v-pre>欢迎---{
       {msg}}</div>
    </div>
    	<script type="text/javascript">
    	    new Vue({
    	        el:"#box",
    	        data:{
    	            msg:"111111"
    	        }
       		})
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

**15、v-cloak，防止闪烁**

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    <div id="box">
        <div v-cloak=''>欢迎---{
       {msg}}</div>
    </div>
    	<script type="text/javascript">
    	    new Vue({
    	        el:"#box",
    	        data:{
    	            msg:"111111"
    	        }
       		})
    	</script>
    </body>
    </html>

显示效果：

![Image 1][]

[Image 1]: