Web前端最全vue高级特性总结_vue 按钮有啥特性(2)，2024年最新前端页面的信息展示主要包括哪三个层面-CSDN博客

本文链接：https://blog.csdn.net/2401_84412357/article/details/138978034

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

</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://img-blog.csdnimg.cn/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里面，不管层级多深，都能够侦听到），例如**  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/b58ac7c87add40658794b9d14ee1c9e5.png)
> 
> 
>

obj:{
//开启深度侦听（只要在obj里面，不管层级多深，都能够侦听到）
deep:true,

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】