Javascript

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

本文主要是介绍【九月打卡】第4天 Vue3框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称: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>


https://img2.sycdn.imooc.com/631948200001722b04910095.jpg

但是*可能会导致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>


https://img2.sycdn.imooc.com/63194be100011e1d04320139.jpg

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


https://img4.sycdn.imooc.com/63194bd700011e1d04320139.jpg

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

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


https://img3.sycdn.imooc.com/63194d0c0001ffda12990313.jpg

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

https://img1.sycdn.imooc.com/63194d4b0001896a13110290.jpg

当我们把时间戳放在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>


https://img1.sycdn.imooc.com/63194df9000188c313130326.jpg

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

https://img4.sycdn.imooc.com/63194e4600014cd014390343.jpg

所以我们得出结论

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');



https://img4.sycdn.imooc.com/6319548b0001c8d914320355.jpg

<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

  1. 监听数据变化

  2. 能异步操作

  3. 通过方法参数能得到之前和之后的值

  4. 和computed很类似,

总结

  1. computed和method都能实现,建议用computed ,因为有缓存

  2. computed和watch都能实现,建议用computed,因为更加简洁


今天学习了Vue框架里面使用的toUpperCase() 方法parseInt(),computed计算属性,watch监听器,setTimeout(() => {},1000)定时器以及他们的区别等,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!  

这篇关于【九月打卡】第4天 Vue3框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!