Vue (二) 高级特性

久醉绕心弦，

已于 2023-02-15 11:21:19 修改

阅读量160

点赞数 1

分类专栏： Vue 文章标签： javascript html vue.js

于 2021-09-23 12:51:38 首次发布

本文链接：https://blog.csdn.net/weixin_42262081/article/details/120421825

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、修饰符

1.事件修饰符：
stop：阻止冒泡（事件冒泡:点击子元素，事件会一级一级冒泡到父元素）

举例：如下当点击子元素“按钮1”时会调用work1方法，还会冒泡到父元素并触发work方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app" @click="work()" style="width:100px; height: 100px; background-color: #008000;">
			<button type="button" @click="work1()">按钮1</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					work: function() {
						console.log('调用work方法')
					},
					work1: function() {
						console.log('调用work1方法')
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
通过.stop阻止冒泡，就不会触发父级元素事件。

<button type="button" @click.stop="work1()">按钮1</button>

.prevnet ：阻止的默认行为事件行为

举例：当点击a标签时会跳转至链接页面，而.prevnet会阻止默认事件并指定新的点击事件，如下：点击百度时调用了work方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="https://www.baidu.com" @click.prevent="work()">百度</a>
		</div>
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					work: function() {
						console.log('调用work方法')
					},
					work1: function() {
						console.log('调用work1方法')
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
2.按键修饰符
在监听键盘事件时，经常需要检查详细的按键，Vue 允许为 v-on 在监听键盘事件时添加按键修饰
符：
如下：keyup.delete给账号输入框绑定清空方法clear()，keyup.enter给密码输入框绑定登录方法login()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<!-- 账号输入框点击delete按钮触发清空方法-->
			账号：<input type="text" v-model="user" @keyup.delete='clear()'><br>
			<!-- 密码输入框点击回车按钮触发登录方法-->
			密码：<input type="text" v-model='pwd' @keyup.enter="login()">
			<button type="button" @click="login()">登录</button>
		</div>
				
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data:{
					user:'',
					pwd:''					
				},
				methods: {
					login: function() {
						console.log('调用登录方法')
					},
					clear:function(){
						this.user=''
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

2、计算属性 computed

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，
遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理

举例：当data中已有的属性发生变化时，computed属性会自动进行计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			number1：<input type="text" v-model="num1"><br>
			number2：<input type="text" v-model="num2">
			<h3>结果：{{res}}</h3>
		</div>
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data:{
					num1:'',
					num2:''
				},
				computed:{
					res:function(){
						return this.num1*this.num2
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

3、侦听器-watch

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

案例如下：
通过watch来定义侦听器，当name发送变化，下面的函数就会执行，function接收两个参数：新值，原始值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name">
		</div>
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data:{
					name:'java'
				},
				
				watch:{
					name:function(value,oldValue){
						console.log('原始值：',oldValue)
						console.log('新值：',value)
						alert('name发生了变化为：'+value)
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
当data里面有多层嵌套数据时，侦听时的数据格式如下：a.b.c

var vm = new Vue({
				el: '#app',
				data:{
					a:{
						b:{
							c:'test'
						}
					}
				}

watch:{
		'a.b.c':function(value,oldValue){						
			}
		}

4、过滤器-filters

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器通过“管道”符号指示，在vue实例对象中，通过filters配置项定义过滤器。

举例：格式化输出计算结果，保留两位小数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			num1:<input type="text" v-model="num1"/><br>
			num2:<input type="text" v-model="num2"/><br>
			结果:{{res | float2}}
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					num1:'',
					num2:''
				},
				computed:{
					res:function(){
						return this.num1*this.num2
					}
				},
				
				//定义过滤器，接收参数为被过滤的参数
				filters:{
					float2:function(value){
						return value.toFixed(2) // 保留两位小数
					}
				}
			})
		</script>
	</body>	
</html>

在这里插入图片描述

久醉绕心弦，

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue (二) 高级特性

1、修饰符1.事件修饰符：stop：阻止冒泡（事件冒泡:点击子元素，事件会一级一级冒泡到父元素）举例：如下当点击子元素“按钮1”时会调用work1方法，还会冒泡到父元素并触发work方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vu
复制链接

扫一扫