首页手记【九月打卡】第4天 Vue3框架

【九月打卡】第4天 Vue3框架

标签：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第2章 Vue 基础语法

主讲老师：Dell

课程内容：

今天学习的内容包括：

toUpperCase() 方法
parseInt()
computed计算属性
watch监听器
setTimeout(() => {},3000)定时器

课程收获：

toUpperCase() 方法用于把字符串转换为大写。

string.toUpperCase()

<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
}
},
methods: {
formatString(string) {
//将字符串转换为大写
return string.toUpperCase();
}
},
template: `
<div>{{formatString(message)}}</div>
`
});

const vm = app.mount('#root');
</script>

插值表达式计算count+price
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 10,
price: 2,
}
},
template: `
<div>{{count+price}}</div>
`
});

const vm = app.mount('#root');
</script>

但是*可能会导致NaN,所以要用parseInt进行转换

parseInt() 函数可解析一个字符串，并返回一个整数。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

语法

parseInt(string, radix)

<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 10,
price: 2,
}
},
template: `
<div>{{parseInt(count,10) * parseInt(price,10)}}</div>
`
});

const vm = app.mount('#root');
</script>

computed基本语法：

computed: {
    "计算属性名" () {
        return "值"
    }}12345

作用：返回一个数据，依赖于其他变量计算得到的结果,内部带有缓存机制，当计算属性依赖的内容发生变更时，才会重新执行计算，computed 在做页面渲染时会更高效一些。

使用场景：只需要获取计算结果

<script>
const app = Vue.createApp({
data() {
return {
count: 10,
price: 1,
}
},
computed: {
total() { //当total函数依赖的count和price值发生变化的时候,total自身会重新计算
return this.count * this.price
}
},
template: `
<div>{{total}}</div>
`
});

const vm = app.mount('#root');
</script>

在methods里面设置getTotal(){} 的方法进行调用

<!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>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 10,
price: 1,
}
},
methods: {
getTotal() {
return this.count * this.price;
}
},
template: `
<div>{{getTotal()}}</div>
`
});

const vm = app.mount('#root');
</script>
</html>

看似没有区别,但实际上有,举个栗子

<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
count: 10,
price: 1,
}
},
computed: {
total() { //当total函数依赖的count和price值发生变化的时候,total自身会重新计算
return Date.now()
}
},
methods: {
getTotal() {
return this.count * this.price;
}
},
template: `
<div>{{message}}{{total}}</div>
`
});

const vm = app.mount('#root');
</script>

当改变message里面的值的时候,时间戳不变

当我们把时间戳放在methods方法的getTotal里进行测试

<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
count: 10,
price: 1,
}
},
computed: {
total() { //当total函数依赖的count和price值发生变化的时候,total自身会重新计算
return this.count * this.price;
}
},
methods: {
getTotal() {
return Date.now();
}
},
template: `
<div>{{message}}{{getTotal()}}</div>
`
});

const vm = app.mount('#root');
</script>

当我们改变message的值时,我们发现时间戳的数值变了

所以我们得出结论

computed: 内部带有缓存机制，当计算属性依赖的内容发生变更时，才会重新执行计算\

methods：只要页面重回新渲染，就会重新计算

通过watch的监听器里设置和computed计算属性里一样的效果

const app = Vue.createApp({
data() {
return {
message: "hello",
count: 10,
price: 1,
newTotal: 10,
}
},
watch: { //监听器，可以监听data里面的变量，再做一些异步的操作
price(current,prev) { //current当前的新值,prev之前的值
// console.log(current,prev);
this.newTotal = current * this.count;
setTimeout(() => {
console.log('price changed');
},3000)
}
},
computed: { //当计算属性依赖的数值发生改变的时候才会重新计算
total() { //当total函数依赖的count和price值发生变化的时候,total自身会重新计算
return this.count * this.price;
}
},
methods: { //只要页面进行重新渲染才会重新计算
getTotal() {
return Date.now();
}
},
template: `
<div>{{message}}{{newTotal}}</div>
`
});

const vm = app.mount('#root');

<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello",
count: 10,
price: 1,
}
},
watch: { //监听器，可以监听data里面的变量，再做一些异步的操作
price(current,prev) { //current当前的新值,prev之前的值
console.log(current,prev);
setTimeout(() => {
console.log('price changed');
},3000)
}
},
computed: { //当计算属性依赖的数值发生改变的时候才会重新计算
total() { //当total函数依赖的count和price值发生变化的时候,total自身会重新计算
return this.count * this.price;
}
},
methods: { //只要页面进行重新渲染才会重新计算
getTotal() {
return Date.now();
}
},
template: `
<div>{{message}}{{total}}</div>
`
});

const vm = app.mount('#root');
</script>