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

最新推荐文章于 2024-05-03 21:19:47 发布

訾博ZiBo

最新推荐文章于 2024-05-03 21:19:47 发布

阅读量180

点赞数

分类专栏： Vue.js 文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_29689343/article/details/118047606

版权

Vue.js 专栏收录该内容

102 篇文章 18 订阅

订阅专栏

文章目录

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

运行结果

计算属性和方法的不同

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

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

运行结果

侦听器

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

运行结果

侦听器参数

代码

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

运行结果

总结

计算属性：依赖的属性发生变化时改变；

方法：每次页面刷新就会执行；

侦听器：当侦听的某值发生变化时执行，是计算属性的底层实现；

訾博ZiBo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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="viewpo
复制链接

扫一扫