Vue 指令

矫情吗；* 2023-06-06 08:22 19阅读 0赞

## 基本指令 ##

**（1）v-bind指令**  
*语法格式1：单个语法格式*  
v-bind:attributeName=variable

以下是HTML代码：
    <div class="app">
    			<a
    				v-bind:class="classFn"
    				v-bind:title="titleFn"
    				v-bind:href="hrefFn"
    				v-bind:target="targetFn"
    			>	
    			{
       {text}}
    			</a>
    		</div>
    		以下是javaScript代码：
    		<script type="text/javascript">
    		var app = new Vue({
    			el:'.app',
    			data:{
    				classFn:'aName',
    				titleFn:'百度',
    				hrefFn:'http://www.baidu.com',
    				targetFn:'_blank',
    				text:'百度一下'
    			}
    		})
    	</script>

*语法格式2：对象语法格式*  
v-bind=“\{attributeName1:variable1,attributeName2:variable2,……\}”  
案例：在页面中利用Vue实例的变量制作一个超级链接

以下是HTML代码：
    <div class="app">
    			<a v-bind="{class:link.class,title:link.title,href:link.href,target:link.target}">	
    			{
       {link.info}}
    			</a>
    		</div> 
    以下是javaScript代码：
    <script type="text/javascript">
    		var app = new Vue({
    			el:'.app',
    			data:{
    				link:{
    					class:'aaa',
    					title:'百度',
    					href:'http://www.baidu.com',
    					target:'_blank',
    					info:'百度'
    				}
    			}
    		})
    	</script>

语法格式3：数组语法格式”绑定类名”v-bind:attributeName=“\[variable1,variable2,……\]”  
案例（绑定类名）：

以下是HTML代码：
    <div class="app">
    			<a v-bind:class='[class1,class2,class3]' :href="hrefFn">{
       {info}}</a>
    		</div>
    		以下是javaScript代码：
    		<script type="text/javascript">
    		var app = new Vue({
    			el: '.app',
    			data: {
    				info: '百度一下',
    				class1: 'a1',
    				class2: 'a2',
    				class3: 'a3',
    				hrefFn: 'http://www.baodu.com'
    			}
    		})
    	</script>

**（2）基本指令v-if和基本指令v-show**  
v-if指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例  
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：

以下是HTML代码：
    <div id="app">
    		   <p v-if="show">这是段文字</p >
    </div>
    	以下是javaScript代码：
    <script type="text/javascript">
    	var app = new Vue({
    		   el:'#app',
    		   data:{
    		    show:false   // 为false直接销毁这段文字
    		    // show:true    为true时渲染DOM，否则不进行渲染
    		    // 当数据show为true时，p元素会被插入，为false时则会被移除。
    		   }
    		  }) 
     <script type="text/javascript">

**数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。**

v-show也是指条件性渲染，用法与v-if类似：  
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

以下是HTML代码：
     <div id="app">
    		     <p v-show="show">这是段文字</p >
     </div>
     以下是javaScript代码：
    <script type="text/javascript">
     var app = new Vue({
    		     el:'#app',
    		     data:{
    		      show:false  //为false时p标签会切换css属性display为none
    		      // show:true //为true时p标签会去除css的display属性
    		     }
    		    }) 
    	</script>

**vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的**  
![在这里插入图片描述][20191010185638715.png]  
![在这里插入图片描述][20191010185656818.png]  
![在这里插入图片描述][20191010185708615.png]  
![在这里插入图片描述][20191010185717194.png]

**一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。**

**（3）基本指令v-on**  
v-on表达式  
语法：v-on:事件类型=”内联语句”  
表达式除了方法名，也可以是内联语句：

*建议将事件处理放到methods里声明一个方法，提高可读性与维护性。*

# v-on修饰符（重点） #

**①.stop：阻止事件的传递，即阻止事件向上冒泡。**  
*例：*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>v-on修饰符stop</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.app{
    				width: 400px;
    				height: 400px;
    				background: red;
    			}
    			.app1{
    				width: 200px;
    				height: 200px;
    				background: yellowgreen;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="demo">
    			<div class="app" :title="title1" @click="dianji1">
    				<div class="app1" :title="title2" @click.stop="dianji2">
    				</div>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el:'.demo',
    			data:{
    				title1:'父',
    				title2:'儿'
    			},
    			methods:{
    				dianji1:function(){
    					console.log('父亲')
    				},
    				dianji2:function(){
    					console.log('儿子')
    				}
    			}
    		})
    	</script>
    </html>

**②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。**  
*例：*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>v-on修饰符prevent</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		②.prevent：阻止对象的默认行为。
    		.prevent会调用 event.preventDefault() 即取消事件的默认动作。
    		<div class="demo">
    			<a @click.prevent href="http://www.baidu.com">百度一下</a>
    			<a @click.prevent href="javascript:;">百度一下</a>
    			<a href="javascript:viod(0)">百度一下</a>
    			<button type="button">提交</button> 
    			
    		</div>
    	</body>
    	<script type="text/javascript">
    		/* 1.创建根实例 */
    		var demo = new Vue({
    			/* 2.挂载根实例到元素上 */
    			el: '.demo',
    		})
    	</script>
    </html>

**③.capture：使用事件捕获机制**  
*例：*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>3b.v-on修饰符capture</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.app {
    				width: 400px;
    				height: 400px;
    				background: red;
    			}
    
    			.app1 {
    				width: 200px;
    				height: 200px;
    				background: yellowgreen;
    			}
    		</style>
    	</head>
    	<body>
    		
    		.capture：使用事件捕获机制
    		<div class="demo">
    			<div class="app" :title="title1" @click.capture="dianji1">
    				<div class="app1" :title="title2" @click.stop="dianji2">
    				</div>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '.demo',
    			data: {
    				title1: '父',
    				title2: '儿'
    			},
    			methods: {
    				dianji1: function() {
    					console.log('父亲')
    				},
    				dianji2: function() {
    					console.log('儿子')
    				}
    			}
    		})
    	</script>
    </html>

**④.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。**  
*例：*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>3b.v-on修饰符self</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.app{
    				width: 400px;
    				height: 400px;
    				background: red;
    			}
    			.app1{
    				width: 200px;
    				height: 200px;
    				background: yellowgreen;
    			}
    		</style>
    	</head>
    	<body>
    		用处：点击遮罩层的时候，关闭遮罩层和里面的图片。注意：点击图片不管用
    		.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
    		<div class="demo">
    			<div class="app" :title="title1" @click.self="dianji1">
    				<div class="app1" :title="title2">
    				</div>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    			var demo = new Vue({
    				el:'.demo',
    				data:{
    					title1:'父',
    					title2:'儿'
    				},
    				methods:{
    					dianji1:function(){
    						console.log('父亲')
    					},
    					dianji2:function(){
    						console.log('儿子')
    					}
    				}
    			})
    	</script>
    </html>

**⑤v-on修饰符  
.once：绑定的事件只能触发一次。**  
![在这里插入图片描述][20191010191030500.png]

**⑥keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）**  
例 图1如下：  
![在这里插入图片描述][20191010191124261.png]  
例 图2如下：  
![在这里插入图片描述][20191010191202636.png]  
例 图3如下：  
![在这里插入图片描述][2019101019123927.png]

***v-on修饰符小结***  
**（1）**.stop冒泡事件修饰符，阻止事件向上冒泡  
**（2）**.prevent默认事件修饰符，阻止对象的默认行为  
**（3）**.capture捕获事件修饰符，使用事件捕获机制  
**（4）**.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调  
**（5）**.once一次性事件修饰符，绑定的事件只能触发一次  
\*\*（6）\*\*keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）  
![在这里插入图片描述][20191010191445253.png]

## 拓展：动态参数 ##

**2.6版本新增：**  
从 2.6.0 开始，可以用方括号括起来的 JS表达式作为一个指令的参数，如下所示动态绑定title属性， 实例有一个 data 属性 attributeName，其值为 “title”，那么这个绑定将等价于 v-bind:title：  
*动态参数例：*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>动态参数</title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			#demo {
    				width: 500px;
    				height: 500px;
    				background: teal;
    			}
    
    			#demo>div {
    				width: 200px;
    				height: 200px;
    				background: yellow;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="demo">
    			<div v-bind:[pei]='title'></div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '#demo',
    			data: {
    				pei: 'title',
    				title: '你好'
    			}
    		})
    	</script>
    </html>

***methods选项-代理方法***  
*代理方法调用：  
Vue.js将methods里的方法也代理了， 所以可以像访问Vue数据一样来调用方法。*  
在hide方法里，直接通过this.hide\_p()调用了hide\_p()函数。这样只是一种写法，具体应用场景后续结合生命周期讲解。  
![在这里插入图片描述][20191010191828759.png]  
![在这里插入图片描述][20191010191834525.png]

## Vue 指令的小知识，有问题留言小编。 ##

# 谢谢，嘿嘿！！！ #

[20191010185638715.png]: /images/20230601/89beb80d324741ddba9736e7f53b7037.png
[20191010185656818.png]: /images/20230601/ab91d07573d14cc0925ea0b07184fcb2.png
[20191010185708615.png]: /images/20230601/fabc6ab2ef9a4a62b1b33a564deb2d04.png
[20191010185717194.png]: /images/20230601/9c566252e9ff49429234b6e6a88bf974.png
[20191010191030500.png]: /images/20230601/38afd754cd0a4c2fb2428a4252215ff1.png
[20191010191124261.png]: /images/20230601/db4c6da36c9e4aa9bdf1f775d7dee8b9.png
[20191010191202636.png]: /images/20230601/72ecb71406774d27b4f7f91559c49320.png
[2019101019123927.png]: /images/20230601/d2d9935f102e4e0da089ecbf9f143aa6.png
[20191010191445253.png]: /images/20230601/19da64bc59cb409988a34a4a984b498c.png
[20191010191828759.png]: /images/20230601/4072be85067740d4bf4e9234cdf9fa02.png
[20191010191834525.png]: /images/20230601/c99049d9019a4a01b5cba0c5dc2fd126.png