vue.js学习笔记十七 —— 监听器

最新推荐文章于 2024-08-12 14:22:13 发布

武汉小喽啰

最新推荐文章于 2024-08-12 14:22:13 发布

阅读量236

点赞数 1

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/95013643

版权

vue 专栏收录该内容

46 篇文章 9 订阅

订阅专栏

1. 使用keyup事件监听

    <body>
		<div id="app">
			<input type="text" v-model="firstname" @keyup="getFullName"/> 
			+ 
			<input type="text" v-model="lastname" @keyup="getFullName"/> 
			= 
			<label>{{fullname}}</label>
		</div>
	</body>
	<script>
		// 创建Vue实例，得到viemodel
		var vm = new Vue({
			el:'#app' ,
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				getFullName(){
					this.fullname = this.firstname + this.lastname
				}
			}
		});
	</script>

传统的方式可以使用keyup事件，通过vue的双向绑定机制来实现

2. 使用vue的watch属性实现监听器

watch属性可以监听data中指定数据的变化，然后触发这个watch中对应的function处理函数

2.1 watch属性的使用

需要监听哪个数据，就在watch中定义该数据的处理函数即可。

例如：我需要监听data中firstname值的改变

watch:{
               firstname:function(newVal,oldVal){
                   // 第一种方式：不用传递的参数
                   //this.fullname = this.firstname + " -- " + this.lastname;

                   // 第二种方式：用传递的参数
                   this.fullname = newVal + ' -- ' + this.lastname
               }
           }

2.2 参数说明

在处理函数中，可以传递两个参数：newVal,oldVal

newVal：改变之后的值

oldVal：改变之前的值

2.3 案例说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
    
  	<style>
  	</style>
</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstname"/> 
			+ 
			<input type="text" v-model="lastname"/> 
			= 
			<label>{{fullname}}</label>
		</div>
	</body>
	<script>
		// 创建Vue实例，得到viemodel
		var vm = new Vue({
			el:'#app' ,
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
			},
			watch:{
				firstname:function(newVal,oldVal){
					// 第一种方式：不用传递的参数
					//this.fullname = this.firstname + " -- " + this.lastname;
					
					// 第二种方式：用传递的参数
					this.fullname = newVal + ' -- ' + this.lastname
				},
				'lastname':function(newVal){ // 因为这里用不到oldVal，所以只用传递一个参数
					this.fullname = this.firstname + ' -- ' + newVal;
				}
			}
		});
	</script>
</html>

注意：

1. watch属性中的监控对象，如果是下划线命名方式，就必须用引号括起来，如果不是，则不需要。

2. function的参数，newVal,oldVal可以传也可以不传。

3. 在监听器内部，可以用this.属性名的方式赋值，也可以用参数的形式

2.4. watch监听路由地址的改变

我们获取路由地址是通过 this.$route.path来获取的，所以监听路由地址的时候，只需要监听该值即可。

例如：

watch:{
                   '$route.path':function(newVal,oldVal){
                       console.log(newVal + " " + oldVal)
                   }
}

watch监听的优势：相比较于keyup等事件监听机制，watch属性监听可以监听一些非DOM元素的改变，比如：路由地址的改变

3. computed计算属性

在computed属性中，可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质就是一个方法，只是我们在使用这些方法的时候，是把他们的名称直接当做属性来使用的，并不会把计算属性当做方法来调用。

3.1 computed属性的定义

同watch属性一样，与method同级，定义的时候，只需要在method平级的位置加入该属性即可

例如：computed: { ... }

3.2 computed计算属性的使用

3.3.1 默认只有`getter`的计算属性

我们在前面的案例中，不管是使用watch还是keyup实现的监听，都需要同时监听firstname与lastname然后赋值给fullname，同时在data中定义fullname，现在用computed属性就不需要这样做了，我们只需要在computed中定义一下fullname即可。

例如：

computed:{
                   'fullname':function(){
                       return this.firstname + ' -- ' + this.lastname
                   }
}

我们在data中不需要再定义fullname了，而是将fullname作为computed的一个属性，在界面可以直接引用，使用起来更加方便。

3.3.2 定义有`getter`和`setter`的计算属性

computed默认只有getter属性，默认情况下，可以省略get，但是，某些情况下，我们需要设置一下值，这时候，就需要使用到setter属性了。

定义：

computed: {
        '属性名': {
          get: function () {... },
          set: function (newVal) {...}
        }
      }

例如：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>