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

Vue 2021-05-23

下面介绍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!'
  }
})

输出结果：

<div a=''  v-bind:a=''>

这句代码中的两种定义属性的区别，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()
   }
})

显示效果如下：

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 style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
     	<!--<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>

显示结果：

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='{red:isred}'></div>-->
    	<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>    <!--三元运算符方式-->
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
	</div>

	
	<script type="text/javascript">
	    new Vue({
         	el: "#box",data:{
                isred:false
            }
    	})

	</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>
	<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 style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->     	
		<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>

显示效果：

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>

显示效果：

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'
				},}
		})
	</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',style2:{
					color:'black'
				},}
		})
	</script>
</body>
</html>

显示效果：

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来控制能否看见内容
  }
})

显示结果:

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

html如下：

	<div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
	<div style="width: 100px;height: 100px;background: aqua;"v-else-if="hide"></div>
	<div style="width: 300px;height: 300px;background: blue"v-else=""></div><div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
	<div style="width: 100px;height: 100px;background: aqua;"v-else-if="hide"></div>
	<div style="width: 300px;height: 300px;background: blue"v-else=""></div>

js如下：

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

 

显示效果如下：

 

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

html如下：

<div style="width: 100px;height: 100px;background: black;"v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue"v-else=""></div>

 

js如下：

 

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

显示效果如下：

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

html如下：

 
<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>

js如下：

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

显示效果如下：

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渲染效果：

v-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 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渲染效果：

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

html如下：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

js如下：

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

显示效果如下：

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('')
    }
  }
})

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

                         

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!'
  }
})

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

                   

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>

显示结果：

 

<p1>11111</p1>

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",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>

页面初始化效果：

点击false，页面效果

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

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>

显示效果：

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>

显示效果：

 

 

相关文章

Vuex- Action的 { commit }的写法
https://segmentfault.com/a/1190000022018995 https://www....
ES6模块之export和import详解
ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的...
Vue知识点汇总（含Vue3）
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
npm init vite@latest vue3study --template vue
D:\Temp&gt;npm init vite@latest vue3study --temp...
Vue 中使用消息总线让两个滚动条同步滚动
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
Vue + lodop 静默打印
文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简...