VUE学习笔记：4.vue的计算属性和v-on绑定监听事件
Posted new nm个对象
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE学习笔记：4.vue的计算属性和v-on绑定监听事件相关的知识，希望对你有一定的参考价值。
一.计算属性
1.什么是计算属性
2.计算属性的基本使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--可以像使用data中的数据一样，获取计算属性中的数据内容-->
<h2>{{fullName}}</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
firstName: 'zhang',
lastName: 'san'
},
//计算属性中的数据可以跟data中的数据一样使用，不过它的数据的值是通过方法的运算后得出的
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
运行效果如下：
当然我们也可以使用methods来增加一个方法达到同样的效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--HTML页面中要使用一个方法必须在后面加上()-->
<h2>{{getfullName()}}</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
firstName: 'li',
lastName: 'si'
},
methods: {
getfullName: function(){
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
-
methods方法和计算属性computed都可以实现计算功能，但是它们也有些不同：
-
computed计算属性是一个属性，挂载点使用它不需要在后面加括号。例如：fullName1
-
methods是一个方法，挂载点使用它需要在后面加括号。例如：fullName1()
-
computed计算属性会将值存到缓存中，当它的值没变化时，则不会计算，而是使用缓存。而methods则不同，每调用一次方法都会计算一次。所以对于不太变化的内容使用计算属性可以大大减小系统的消耗。
3.计算属性的getter和setter
-
每一个计算属性都有一个get方法和一个set方法。
-
当我们获取计算属性的值时会调用get方法。当我们给计算属性赋值时会调用先调用set方法再调用get方法。
-
我们前面的计算属性的写法都只是实现了计算属性的get方法。
-
计算属性一般不设置set方法。
-
实现计算属性的get方法：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h2>{{fullName}}</h2> </div> <!--引入本地的vue.js文件--> <script src="../vue.js"></script> <script> // ES6中使用let定义变量，使用const定义常量 let app = new Vue({ el: '#app', // 讲这个vue实例与id为app的标签关联起来 data: { firstName: 'li', lastName: 'si' }, computed:{ fullName: { get(){ return this.firstName + ' ' + this.lastName; } } // 如果计算属性只实现get方法，那么一般简写为这种形式。 // fullName: function(){ // return this.firstName + ' ' + this.lastName; // } } }) </script> </body> </html>此时我们修改计算属性的值：
-
实现计算属性的set方法。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--HTML页面中要使用一个方法必须在后面加上()--> <h2>{{fullName}}</h2> </div> <!--引入本地的vue.js文件--> <script src="../vue.js"></script> <script> // ES6中使用let定义变量，使用const定义常量 let app = new Vue({ el: '#app', // 讲这个vue实例与id为app的标签关联起来 data: { firstName: 'li', lastName: 'si' }, computed:{ fullName: { get(){ console.log('开始调用get方法'); return this.firstName + ' ' + this.lastName; }, set(newValue){ console.log('开始调用set方法'); let name_list = newValue.split(' '); this.firstName = name_list[0]; this.lastName = name_list[1]; } } } }) </script> </body> </html>
修改计算属性的值效果如下：
4.计算属性与method的区别
我们用一个小案例来看看它们之间的区别：在一个页面上多次打印相同的计算属性或者方法。
使用method实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
firstName: 'li',
lastName: 'si'
},
methods: {
getfullName: function(){
console.log('调用方法+1');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
使用computed实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
firstName: 'li',
lastName: 'si'
},
computed: {
fullName: function(){
console.log('调用计算属性+1');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
二.v-on绑定监听事件
1.v-on的基本使用
语法格式：v-on:监听的事件="表达式/方法名"
简写格式：@监听的事件="表达式/方法名"
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{count}}</h2>
<button v-on:click="jia">+</button>
<button @click="jian">-</button>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
count: 0
},
methods: {
jia: function(){
this.count++;
},
jian: function(){
this.count--;
}
}
})
</script>
</body>
</html>
运行效果如下：
2.v-on的传参问题
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--如果绑定监听事件的方法没有形参，那么调用方法时可以加()，也可以不加-->
<button v-on:click="btnclick1()">按钮1</button>
<button v-on:click="btnclick2">按钮2</button>
<!--如果绑定监听事件的方法有一个形参，如果不传参数则会默认将`事件对象`本身作为参数-->
<button v-on:click="btnclick3('zhangsan')">按钮3</button>
<button v-on:click="btnclick4">按钮4</button>
<!--如果绑定监听事件的方法有多个形参，如果不传参数则会默认将`事件对象`本身作为第一个参数，其他参数会默认为undefined-->
<button v-on:click="btnclick5('zhangsan','lisi')">按钮5</button>
<button v-on:click="btnclick6">按钮6</button>
<!--如果绑定监听事件的方法有多个参数，且其中的参数之一为事件对象本身，可以使用$event来获取-->
<button v-on:click="btnclick7('zhangsan',$event)">按钮7</button>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
btnclick1: function(){
console.log('btnclick1');
},
btnclick2: function(){
console.log('btnclick2');
},
btnclick3:以上是关于VUE学习笔记：4.vue的计算属性和v-on绑定监听事件的主要内容，如果未能解决你的问题，请参考以下文章