vue高级特性总结_vue 按钮有啥特性

于 2024-06-18 23:25:43 发布
阅读量238 收藏 5
点赞数 8
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84435768/article/details/139786157
版权 
		Vue.createApp({
			data(){
				return{
					
				}
			},
			methods:{
				work1(){
					console.log('--work1--')
				},
				work2(){
					console.log('--work2--')
				},
				work3(){
					console.log('--work3--')
				},
			}
		}).mount('#app')
		

	</script>
	
</body>


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



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


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


#### 案例1




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


#### 案例2


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




</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>


### 2、按键修饰符


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


#### 案例3




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


![在这里插入图片描述](https://img-blog.csdnimg.cn/9b1ea805d55d4fe59af561fda4dc0efc.png)


### 3、表单修饰符



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


#### 案例4




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


## 二、计算属性computed


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


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


#### 案例5




	<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>
		<hr />
		<h3>总价:{{sumPrice}}</h3>
		<hr />
		<h3>数组中大于50的数字：{{range_50}}</h3>
	</div>
	
	<script>
		
		Vue.createApp({
			data(){
				return{
					goods:{
						name:"lemon",
						price:8,
						number:6
					},
					arr:[1,5,8,89,54,66,88]
				}
			},
			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
					})
				}
			}
		}).mount('#app')
		

	</script>
	
</body>


![在这里插入图片描述](https://img-blog.csdnimg.cn/ebfe618512e04f6bae0c9b3a3746e450.png)


## 三、监听器watch


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


#### 案例6




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


![在这里插入图片描述](https://img-blog.csdnimg.cn/c9c4781557734b73accefe89f06c57a1.png)



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


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




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


![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/11c194bc9cbad87880fc59a68734c345.png)


### 侦听器之深度侦听



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

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



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


# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心



is.goods.number=this.goods.maxNumber
						}
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

在这里插入图片描述

侦听器之深度侦听

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

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

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

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

2401_84435768
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值