VUE学习笔记：4.vue的计算属性和v-on绑定监听事件
一.计算属性
1.什么是计算属性
2.计算属性的基本使用
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<h2>{
{fullName}}h2>
div>
<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">
<h2>{
{getfullName()}}h2>
div>
<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> <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"> <h2>{ {fullName}}h2> div> <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>
<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>
<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>
<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()">按钮1button>
<button v-on:click="btnclick2">按钮2button>
<button v-on:click="btnclick3('zhangsan')">按钮3button>
<button v-on:click="btnclick4">按钮4button>
<button v-on:click="btnclick5('zhangsan','lisi')">按钮5button>
<button v-on:click="btnclick6">按钮6button>
<button v-on:click="btnclick7('zhangsan',$event)">按钮7button>
div>
<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: function(name){
console.log(name);
},
btnclick4: function(name){
console.log(name);
},
btnclick5: function(name1,name2){
console.log(name1);
console.log(name2);
},
btnclick6: function(name1,name2){
console.log(name1);
console.log(name2);
},
btnclick7: function(name,event){
console.log(name);
console.log(event);
}
}
})
script>
body>
html>
3.v-on的修饰符
（1）event事件.stop修饰符阻止事件冒泡
先看一个案例：
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app" v-on:click="divclick">
我是div
<button v-on:click="btnclick">按钮1button>
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
divclick: function(){
console.log('div被点击了')
},
btnclick: function(){
console.log('button被点击了')
}
}
})
script>
body>
html>
运行效果如下：
使用event事件.stop修饰符阻止事件冒泡。
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app" v-on:click="divclick">
我是div
<button v-on:click.stop="btnclick">按钮1button>
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
divclick: function(){
console.log('div被点击了')
},
btnclick: function(){
console.log('button被点击了')
}
}
})
script>
body>
html>
运行效果如下：
（2）event事件.prevent修饰符阻止标签的默认事件
还是先看一个案例：
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<a href="https://www.baidu.com">百度一下a>
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
}
})
script>
body>
html>
效果如下：
使用event事件.prevent修饰符来阻止标签的默认事件
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<a href="https://www.baidu.com" v-on:click.prevent="aclick">百度一下a>
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
aclick: function(){
console.log('点击a标签');
}
}
})
script>
body>
html>
运行效果如下：
（3）键盘事件.键名 修饰符来监听特殊的键帽
老规矩还是先来看一个案例：
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<input type="text" @keyup="keyUp">
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
keyUp: function(){
console.log('按键盘咯');
}
}
})
script>
body>
html>
运行效果如下：
使用键盘事件.键名修饰符来监听特殊的键位抬起。例如：回车键
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<input type="text" @keyup.enter="keyUp">
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
keyUp: function(){
console.log('按键盘咯');
}
}
})
script>
body>
html>
运行效果如下：
（4）event事件.once修饰符只触发一次事件方法
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<button @click.once="btnclick">点点点button>
div>
<script src="../vue.js">script>
<script>
// ES6中使用let定义变量，使用const定义常量
let app = new Vue({
el: '#app', // 讲这个vue实例与id为app的标签关联起来
data: {
},
methods: {
btnclick: function(){
console.log('点击按钮咯');
}
}
})
script>
body>
html>
运行效果如下：
