计算属性与侦听器

# 1 计算属性

计算属性用于对原始数据的再次加工

需求

实现如下效果

04_computed

# 1) 完成 Vue 的三步曲

在 src 目录下创建07_计算属性.html, 编写基础的 vue 模板

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07_计算属性</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 使用传统方式

分析

页面由一个输入框和一个提示组成

示例

html 部分

<!-- 2. 编写div元素 -->
<div id="app">
  输入金额:
  <input type="text" v-model="total" />
  <h3>您一共消费了{{ total }}元</h3>
</div>

1
2
3
4
5
6

js 部分

<!-- 3. 编写vue实例 -->
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      total: 0,
    },
  })
</script>

1
2
3
4
5
6
7
8
9

# 3) 使用计算属性

示例

html 部分

<!-- 2. 编写div元素 -->
<div id="app">
  输入金额:
  <input type="text" v-model="total" />
  <h3>{{ msg }}</h3>
</div>

1
2
3
4
5
6

js 部分

<!-- 3. 编写vue实例 -->
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      total: 0,
    },
    computed: {
      msg() {
        return `您一共消费了${this.total}元`
      },
    },
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4) 小结

举个极端的案例, 我们写了一万个页面, 您一共消费了元这段代码就要写一万次

如果, 突然有一天, 需求改变了, 提示信息是: 您本次消费xx元, 那么就要修改一万次

设计原则

视图业务无关性原则: 尽量将视图显示和业务处理解耦

# 2 侦听器

侦听器用于侦听数据的改变, 进而自动触发相应的方法

需求

实现如下效果:

![05_watch](http://image.brojie.cn// images05_watch.gif)

# 1) 完成 Vue 的三步曲

在 src 目录下创建08_侦听器.html, 编写基础的 vue 模板

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08_侦听器</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 使用侦听器实现

示例

html 部分

<!-- 2. 编写div元素 -->
<div id="app">
  单价:10元
  <br />
  数量:
  <input type="text" v-model="number" />
  <h3>总价: {{ total }}元</h3>
</div>

1
2
3
4
5
6
7
8

js 部分

<!-- 3. 编写vue实例 -->
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      number: 0,
      total: 0,
    },
    watch: {
      number() {
        this.total = 10 * this.number
      },
    },
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

watch: {
  // 监听data中已经存在的变量, 在watch中写的函数跟变量是同名
  // 是一对多, 当变量值发生改变时, 执行一系列的操作
  number(newValue, oldValue) {
    // number被改变, 就会执行对应watch函数

    // 操作一: 计算total的值
    this.total = this.number * 10
    // 操作二: 可以记录旧的值, 新的值
    console.log(newValue, oldValue)
},

1
2
3
4
5
6
7
8
9
10
11

# 3) 使用计算属性实现

示例

html 部分

<!-- 2. 编写div元素 -->
<div id="app">
  单价:10元
  <br />
  数量:
  <input type="text" v-model="number" />
  <h3>总价: {{ total }}元</h3>
</div>

1
2
3
4
5
6
7
8

js 部分

<!-- 3. 编写vue实例 -->
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      number: 0,
    },
    computed: {
      total() {
        return this.number * 10
      },
    },
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3 总结

两者的区别:

计算属性用于对原始数据的再次加工, 计算属性是有缓存的. 相当于在 vue 实例中添加了一个新的属性, 可以同时依赖多个值, 只要其中依赖的一个值发生改变就会重新计算
侦听器用于侦听数据的改变, 进而自动触发相应的方法. 不会缓存, 每次重新计算, 可以获取新旧数据, 主要用于一个值的改变引起的一系列的操作

# 4 过滤器

对数据进行格式化操作

# 1) 完成 vue 的三步曲

<!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 src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 2) 定义过滤器

过滤器分为

全局过滤器
局部过滤器

全局过滤器

可以所有的 vue 实例中使用

局部过滤器

只能在某一个 vue 实例中使用

示例

<!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 src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{price | priceFormat}}</div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          price: 88,
        },
        filters: {
          // 格式化价格. 保留两位小数, 前面加¥
          // 88 -> ¥88.00
          priceFormat(value) {
            return '¥' + value.toFixed(2)
          },
        },
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

作业

实现如下效果

购物车

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#vue2

上次更新: 2021/09/03, 15:32:17

← 模板语法组件→