课程名称: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>
watch
监听数据变化
能异步操作
通过方法参数能得到之前和之后的值
和computed很类似,
总结
computed和method都能实现,建议用computed ,因为有缓存
computed和watch都能实现,建议用computed,因为更加简洁
今天学习了Vue框架里面使用的toUpperCase() 方法parseInt(),computed计算属性,watch监听器,setTimeout(() => {},1000)定时器以及他们的区别等,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!