4、数据、方法、计算属性、侦听器
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 数据
data() {
return {
message: "Hello World!",
num: 20,
price: 5
}
},
// 方法
methods:{
handleClick(){
alert(this.message);
},
// 我们在方法里面写一个 getTotal() 方法，并在插值表达式里面使用
getTotal(){
return this.num * this.price;
}
},
// 我们可以在插值表达式中这么使用以得到一个总价：num * price
// 但我们想使得插值的内容更加语义化，定义一个 total 来表示计算的结果
// 直接在 data 里面定义 total = num * price 是不行的，因为 total 需要进行计算
// 所以也就有了计算属性，也就是需要经过计算得到的属性
computed: {
total(){
return this.num * this.price;
}
},
// 这样我们就可以在插值语法中直接使用 total 了
template: `
<div>
{{ message }}
{{ "普通计算：" + num * price }}
{{ "计算属性total：" + total }}
{{ "方法getTotal()：" + getTotal() }}
<button @click="handleClick">按钮</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612180304826.png
计算属性和方法的不同
计算属性：当计算属性依赖的属性发生变化时计算属性会重新计算；方法：只要页面刷新，方法就重新执行；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 数据
data() {
return {
message: "Hello World!"
}
},
// 方法
methods:{
handleClick(){
alert(this.message);
},
getTime(){
return Date.now();
}
},
computed: {
time(){
return Date.now();
}
},
template: `
<div>
{{ message }}
<br/>
{{ "计算属性time：" + time }}
<br/>
{{ "方法getTime()：" + getTime() }}
<br/>
<button @click="handleClick">按钮</button>
<br/>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612180941732.png
侦听器
假如我希望在某个属性发生变化之后的 n 秒打印一条信息，我们就需要用到侦听器；
计算属性的底层就是使用侦听器实现的，只不过我们使用计算属性更加简便！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
},
// 侦听器（监视器）
watch:{
message(){
console.log("立即：message 改变了！");
setTimeout(() => {
console.log("三秒后：message 改变了！");
}, 3000)
}
},
template: `
<div>
{{ message }}
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612181744506.png
侦听器参数
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
},
watch:{
message(current, prev){
console.log("当前的值", current);
console.log("之前的值", prev);
}
},
template: `
<div>
{{ message }}
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612182036634.png
总结
计算属性：依赖的属性发生变化时改变；
方法：每次页面刷新就会执行；
侦听器：当侦听的某值发生变化时执行，是计算属性的底层实现；
