【Vue 从入门到实战进阶式掌握完整知识体系】004

2025-07-26 08:42:34

【Vue 从入门到实战进阶式掌握完整知识体系】004 4、数据、方法、计算属性、侦听器代码代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-

【Vue 从入门到实战进阶式掌握完整知识体系】004

4、数据、方法、计算属性、侦听器

代码

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    // 数据
    data() {
      return {
        message: "Hello World!",
        num: 20,
        price: 5
      }
    },
    // 方法
    methods:{
      handleClick(){
        alert();
      },
      // 我们在方法里面写一个 getTotal() 方法，并在插值表达式里面使用
      getTotal(){
        return  * this.price;
      }
    },
    // 我们可以在插值表达式中这么使用以得到一个总价：num * price
    // 但我们想使得插值的内容更加语义化，定义一个 total 来表示计算的结果
    // 直接在 data 里面定义 total = num * price 是不行的，因为 total 需要进行计算
    // 所以也就有了计算属性，也就是需要经过计算得到的属性
    computed: {
      total(){
        return  * this.price;
      }
    },
    // 这样我们就可以在插值语法中直接使用 total 了
    template: `
    <div>
      {{ message }}
      {{ "普通计算：" + num * price }}
      {{ "计算属性total：" + total }}
      {{ "方法getTotal()：" + getTotal() }}
      <button @click="handleClick">按钮</button>
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061218004826.png

计算属性和方法的不同

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    // 数据
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 方法
    methods:{
      handleClick(){
        alert();
      },
      getTime(){
        return ();
      }
    },
    computed: {
      time(){
        return ();
      }
    },
    template: `
    <div>
      {{ message }}
      <br/>
      {{ "计算属性time：" + time }}
      <br/>
      {{ "方法getTime()：" + getTime() }}
      <br/>
      <button @click="handleClick">按钮</button>
      <br/>
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061218094172.png

侦听器

假如我希望在某个属性发生变化之后的 n 秒打印一条信息，我们就需要用到侦听器；计算属性的底层就是使用侦听器实现的，只不过我们使用计算属性更加简便！

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 侦听器（监视器）
    watch:{
      message(){
        cole.log("立即：message 改变了！");
        setTimeout(() => {
          cole.log("三秒后：message 改变了！");
        }, 000)
      }
    },
    template: `
    <div>
      {{ message }}
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612181744506.png

侦听器参数

代码

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!"
      }
    },
    watch:{
      message(current, prev){
        cole.log("当前的值", current);
        cole.log("之前的值", prev);
      }
    },
    template: `
    <div>
      {{ message }}
    </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106121820664.png

总结

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除语法vue基础入门数据

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200330.html

本站网友 ca1734	1分钟前发表
【Vue 从入门到实战进阶式掌握完整知识体系】004 4
本站网友上海星河湾	11分钟前发表
prev); } }
本站网友举办演讲比赛	1分钟前发表
prev){ cole.log("当前的值"
本站网友子癫前症	12分钟前发表
watch
本站网友 facc	10分钟前发表
` <div> {{ message }} </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-202106121820664.png总结计算属性：依赖的属性发生变化时改变；方法：每次页面刷新就会执行；侦听器：当侦听的某值发生变化时执行
本站网友小仓优子	1分钟前发表
如有侵权请联系 cloudcommunity@tencent 删除前往查看语法vue基础入门数据
本站网友万和燃气灶怎么样	13分钟前发表
5 } }
本站网友欧莱雅中国官网	25分钟前发表
分享自作者个人站点/博客

【Vue 从入门到实战进阶式掌握完整知识体系】004