0
点赞
收藏
分享

微信扫一扫

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础:数据、方法、计算属性、侦听器


文章目录

  • ​​4、数据、方法、计算属性、侦听器​​
  • ​​代码​​
  • ​​运行结果​​
  • ​​计算属性和方法的不同​​
  • ​​运行结果​​
  • ​​侦听器​​
  • ​​运行结果​​
  • ​​侦听器参数​​
  • ​​代码​​
  • ​​运行结果​​
  • ​​总结​​

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>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础:数据、方法、计算属性、侦听器_javascript

计算属性和方法的不同

计算属性:当计算属性依赖的属性发生变化时计算属性会重新计算;方法:只要页面刷新,方法就重新执行;

<!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>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础:数据、方法、计算属性、侦听器_js_02

侦听器

假如我希望在某个属性发生变化之后的 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>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础:数据、方法、计算属性、侦听器_js_03

侦听器参数

代码

<!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>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础:数据、方法、计算属性、侦听器_vue_04

总结

计算属性:依赖的属性发生变化时改变;

方法:每次页面刷新就会执行;

侦听器:当侦听的某值发生变化时执行,是计算属性的底层实现;


举报

相关推荐

0 条评论