vue高级特性总结

Dear 丶 2024-04-01 09:23 7阅读 0赞

![在这里插入图片描述][dd6e9b8523254718bc3afb91afa2f4d4.webp_pic_center]

--------------------

#### 文章目录 ####

*  一、修饰符
 *   *  1、事件修饰符
     *   *  案例1
         *  案例2
     *  2、按键修饰符
     *   *  案例3
     *  3、表单修饰符
     *   *  案例4
 *  二、计算属性computed
 *   *   *  案例5
 *  三、监听器watch
 *   *   *  案例6
         *  案例7：当商品数量大于1000时，输入框中数字自动设置成1000；当商品数量小于0时，输入框中数字自动设置成0
     *  侦听器之深度侦听
     *   *  案例8
 *  四、生命周期钩子函数

## 一、修饰符 ##

### 1、事件修饰符 ###

案例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    		
    		<style>
    			.main{
        
    				width:200px;
    				height:200px;
    				background: red;
    			}
    			.box{
        
    				width:100px;
    				height:100px;
    				background: yellowgreen;
    			}
    		</style>
    		
    	</head>
    	<body>
    		
    		<div id='app'>
    			<div class='main' @click='work1'>
    				<div class="box" @click='work2'>
    					<button @click='work3'>按钮A</button>
    				</div>	
    			</div>	
    			<a href='http://www.baidu.com' @click.prevent="work3">百度</a>
    		</div>
    			
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						
    					}
    				},
    				methods:{
        
    					work1(){
        
    						console.log('--work1--')
    					},
    					work2(){
        
    						console.log('--work2--')
    					},
    					work3(){
        
    						console.log('--work3--')
    					},
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>

当点击按钮A时，会触发嵌套在最外层的事件，如下图所示：  
![在这里插入图片描述][6616a22b327d4aadb5f2791e85b003a6.png]

> **html事件冒泡:html的事件默认会往外一层一层传递  
> 事件修饰符：  
> `.stop`:阻止事件冒泡；（事件冒泡:点击子元素，事件会一级一级冒泡到父元素）  
> `.self`:只有点击元素自身时才触发事件  
> `.prevent`：阻止元素默认的事件行为**

**解决方法：采用`.stop`属性**

#### 案例1 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    		
    		<style>
    			.main{
        
    				width:200px;
    				height:200px;
    				background: red;
    			}
    			.box{
        
    				width:100px;
    				height:100px;
    				background: yellowgreen;
    			}
    		</style>
    		
    	</head>
    	<body>
    		
    		<div id='app'>
    			<div class='main' @click='work1'>
    				<div class="box" @click.stop='work2'>
    					<button @click.stop='work3'>按钮A</button>
    				</div>		
    			</div>
    		</div>
    
    		<script>
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						
    					}
    				},
    				methods:{
        
    					work1(){
        
    						console.log('--work1--')
    					},
    					work2(){
        
    						console.log('--work2--')
    					},
    					work3(){
        
    						console.log('--work3--')
    					},
    				}
    			}).mount('#app')
    		</script>
    		
    	</body>
    </html>

#### 案例2 ####

**`.prevent`：阻止元素默认的事件行为**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    		
    	</head>
    	<body>
    		
    		<div id='app'>
    			<a href='http://www.baidu.com' @click.prevent="work3">百度</a>
    		</div>
    	
    		<script>
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						
    					}
    				},
    				methods:{
        
    					
    				}
    			}).mount('#app')
    
    		</script>
    		
    	</body>
    </html>

### 2、按键修饰符 ###

**键盘按键事件：@keyup  
回车键：@keyup.enter：不用点击提交数据按钮触发事件，按enter键也可以触发事件**

#### 案例3 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			
    			<div>
    				账号:<input type='text' v-model.trim='user'/><br>
    				密码:<input type='pwd'  v-model.number='pwd'/><br>
    				手机:<input type='text'  v-model.lazy='phone'/><br>
    				年领:<input type='text' @keyup.enter='alertB' v-model.lazy='age' /><br />
    				<button @click='alertB'>点击提交数据</button>
    			</div>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						user:'kobe',
    						pwd:123456,
    						phone:15111111111,
    						age:18
    					}
    				},
    				methods:{
        
    					alertB(){
        
    						alert('提交数据')
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>

![在这里插入图片描述][9b1ea805d55d4fe59af561fda4dc0efc.png]

### 3、表单修饰符 ###

> **`.trim`:如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符  
> `.number`:自动将输入的纯数字转换为数值类型  
> `.lazy`:在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：**

#### 案例4 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			
    			<div>
    				账号:<input type='text' v-model.trim='user'/>
    				密码:<input type='pwd'  v-model.number='pwd'/>
    				手机号:<input type='text'  v-model.lazy='phone'/>
    			</div>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						user:'kobe',
    						pwd:123456,
    						phone:15111111111
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>

## 二、计算属性computed ##

**在vue中，如果我们需要通过一个或多个数据来计算出来另一个数据**，应该怎么去做？比如：根据用户选择商品的数量来计算商品的总价格。这个时候我们就可以通过计算属性来实现。

计算属性是 vue实例中,可以通过 computed这个配置项来定义计算属性

#### 案例5 ####

![在这里插入图片描述][ebfe618512e04f6bae0c9b3a3746e450.png]

## 三、监听器watch ##

**Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听器在vue中可以使用watch来定义侦听器，**

#### 案例6 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<h3>侦听器的使用</h3>
    			air:<input type='text'v-model='air'/>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						air:100
    					}
    				},
    				//侦听器
    				watch:{
        
    					//侦听飞机这个属性值的变化，当air值发生变化时会执行和属性名称同名的侦听器中的方法
    					air(val){
        
    						//val：为lemon最新的值
    						console.log('air最新的值:',val)
    					},
    				}
    			}).mount('#app')
    			
    		</script>
    		
    	</body>
    </html>

![在这里插入图片描述][c9c4781557734b73accefe89f06c57a1.png]

> **注意：data()中层级嵌套的数据侦听，第74行代码**

#### 案例7：当商品数量大于1000时，输入框中数字自动设置成1000；当商品数量小于0时，输入框中数字自动设置成0 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<h3>商品名称:{
        {
        goods.name}}</h3>
    			<h3>商品单价:{
        {
        goods.price}}</h3>
    			<h3>商品数量:
    				<button @click='add'>+</button>
    				<input type='text' v-model.number='goods.number' />
    				<button @click='sub'>-</button>
    			</h3>
    			<h3>最大的库存量:{
        {
        goods.maxNumber}}</h3>
    			<hr />
    			<h3>总价:{
        {
        sumPrice}}</h3>
    			<hr />
    			<h3>数组中大于50的数字：{
        {
        range_50}}</h3>
    			
    			<hr />
    			<h3>侦听器的使用</h3>
    			air:<input type='text'v-model='air'/>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						goods:{
        
    							name:"lemon",
    							price:8,
    							number:6,
    							maxNumber:1000,
    						},
    						arr:[1,5,8,89,54,66,88],
    						air:100
    					}
    				},
    				methods:{
        
    					sub(){
        
    						return this.goods.number--
    					},
    					add(){
        
    						return this.goods.number++
    					},
    					
    				},
    				//计算属性
    				computed:{
        
    					//商品总价
    					sumPrice(){
        
    						return this.goods.price*this.goods.number
    					},
    					range_50(){
        
    						return this.arr.filter(function(value){
        
    							return value>50
    						})
    					},
    				},
    				//侦听器
    				watch:{
        
    					//侦听飞机这个属性值的变化，当air值发生变化时会执行侦听器中同名的方法 
    					air(val){
        
    						//val：为air最新的值
    						console.log('air最新的值:',val)
    					},
    					//data()中层级嵌套的数据侦听
    					'goods.number':function(val){
        
    						console.log(val)
    						if(val<0){
        
    							this.goods.number=0
    						}else if(val>1000){
        
    							this.goods.number=this.goods.maxNumber
    						}
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>

![在这里插入图片描述][02d59f9ed5da456a816827b0b8faf285.png]

### 侦听器之深度侦听 ###

> **语法形式一：侦听直接定义在data中的数据的变化**

a(val,oldVal){
        
    	console.log('a:',val,oldVal)
    },
    或者
    a:function(val,oldVal){
        
    	console.log('a:',val,oldVal)
    },

> **语法形式二：侦听嵌套数据的具体某个字段的变化**

'obj.name':function(val,oldVal){
        
    	console.log('name:',val,oldVal)
    },

> **语法形式三：侦听嵌套数据中任意数据的变化  
> 开启深度侦听（只要在obj里面，不管层级多深，都能够侦听到），例如**  
> ![在这里插入图片描述][b58ac7c87add40658794b9d14ee1c9e5.png]

obj:{
        
    	//开启深度侦听（只要在obj里面，不管层级多深，都能够侦听到）
    	deep:true,
    	handler:function(val){
        
    		console.log('obj:',val)
    	}
    }

#### 案例8 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    		
    			a:<input type='text' v-model='a' />
    			name:<input type='text' v-model='obj.name' />
    			age:<input type='text' v-model='obj.age' />
    			desc:<input type='text' v-model='obj.info.desc' />
    		
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
        
    				data(){
        
    					return{
        
    						a:'66',
    						obj:{
        
    							name:'kobe',
    							age:18,
    							info:{
        
    								desc:'desc'
    							}
    						}
    					}
    				},
    				methods:{
        
    					
    				},
    				computed:{
        
    					
    				},
    				watch:{
        
    					//语法形式一：直接定义在data中的数据的变化
    //					a(val,oldVal){
        
    //						console.log('a:',val,oldVal)
    //					},
    					a:function(val,oldVal){
        
    						console.log('a:',val,oldVal)
    					},
    					//语法形式二：嵌套数据的具体某个字段的变化
    					'obj.name':function(val,oldVal){
        
    						console.log('name:',val,oldVal)
    					},
    					//语法形式三：嵌套数据中任意数据的变化
    					obj:{
        
    						//开启深度侦听（只要在obj里面，不管层级多深，都能够侦听到）
    						deep:true,
    						handler:function(val){
        
    							console.log('obj:',val)
    						}
    					}
    					
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>

## 四、生命周期钩子函数 ##

//生命周期的钩子函数
    beforeCreate(){
        
    	console.log('---组件对象创建之前----:')
    },
    created(){
        
    	console.log('---组件对象创建之后----:')
    },
    beforeMount(){
        
    	console.log('---组件挂载之前----:')
    },
    mounted(){
        
    	console.log('---组件挂载之后----:')
    },
    beforeUpdate(){
        
    	console.log('---数据修改之前----:')
    },
    updated(){
        
    	console.log('---数据修改之后----:')
    },

--------------------

![在这里插入图片描述][51938e41e0e24deeae1e33bedab778a4.gif_pic_center]

[dd6e9b8523254718bc3afb91afa2f4d4.webp_pic_center]: https://img-blog.csdnimg.cn/dd6e9b8523254718bc3afb91afa2f4d4.webp#pic_center
[6616a22b327d4aadb5f2791e85b003a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/56885387a9a5498980f623143732e6ab.png
[9b1ea805d55d4fe59af561fda4dc0efc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bb76c278a6cd4bc0a529c68d1a168dc3.png
[ebfe618512e04f6bae0c9b3a3746e450.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/709435a6f00c47cea218264240041df1.png
[c9c4781557734b73accefe89f06c57a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bdca8a6a5b2549aa9c60dd27caaca6a1.png
[02d59f9ed5da456a816827b0b8faf285.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/648b0f9a299142f39759a248ef577f57.png
[b58ac7c87add40658794b9d14ee1c9e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/51c345c480244a90be4b7bd9cb428d29.png
[51938e41e0e24deeae1e33bedab778a4.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3e78ba10e4fc4e749f0b9fd08fd4d606.gif