计算属性配置项 computed

使用 Vue 实现一个商品价格计算器，设置一个初始单价，初始数量为 1，用户可以通过加减按钮修改数量，并实时计算出总价。

下面将一步步详细解释上述代码的实现过程

HTML 结构

首先，我们需要在 HTML 文件中添加一个 div 元素作为 Vue 应用的根元素，并给其一个 id 值作为挂载点：

<div id="app">
  <!-- 在这里添加商品价格计算器的 HTML 结构 -->
</div>

在这个 div 元素中，我们可以添加一个标题标签、三个段落标签，前两个段落标签显示单价和数量，第三个段落标签用于显示计算出来的总价，其中加减按钮用于增加或减少数量：

<h1>商品价格计算器</h1>
<p>单价：{{ price }}</p>
<p>数量: <button v-show="num>0" @click="minus">-</button>{{num}}<button @click="plus">+</button></p>
<p>总价：{{ total }}</p>

这里我们使用了 Vue 的模板语法，通过 {{ }} 将数据绑定到 HTML 中。

Vue 实例

接下来，在 JavaScript 文件中创建一个 Vue 实例，将其挂载到 HTML 页面中的 div#app 元素上：

<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    data() {
      return {
        price: 998,
        num: 1
      }
    },
    methods: {
      minus(){
        this.num--
      },
      plus(){
        this.num++
      }
    },
    // 计算属性配置项 实际应用中 某个数据是需要使用data中其他数据计算得到
    computed:{
      // 计算属性的具体配置是函数形式
      total(){
        // 必须返回一个数据
        return this.num*this.price
      }
    }
  })
  vm.mount('#app')
</script>

在 Vue 实例的选项中，我们需要先定义一些数据和方法。

数据

首先，我们需要设置一个初始单价、初始数量和总价的值，这里我们设置单价为 998 元，数量为 1，总价为 998 元：

data() {
  return {
    price: 998,
    num: 1
  }
},

这里使用了 Vue 实例的 data 选项，用于定义数据和变量。

方法

接着，我们需要定义两个方法 plus 和 minus，用于增加或减少商品数量，并且实时计算出总价：

methods: {
  minus(){
    this.num--
  },
  plus(){
    this.num++
  }
}

这里我们使用了 Vue 实例的 methods 选项，用于定义方法。

计算属性

使用 computed 选项定义一个计算属性 total，用于计算商品的总价，其中计算方法是将 num 值乘以 price 值：

computed:{
  // 计算属性的具体配置是函数形式
  total(){
    // 必须返回一个数据
    return this.num*this.price
  }
}

绑定数据和方法

最后，我们需要将定义好的数据和方法绑定到 HTML 页面中的模板语法中：

<p>单价：{{ price }}</p>
<p>数量: <button v-show="num>0" @click="minus">-</button>{{num}}<button @click="plus">+</button></p>
<p>总价：{{ total }}</p>

这里使用了 Vue 的模板语法，通过 {{ }} 将数据绑定到 HTML 中，通过 v-show 和 @click 将方法绑定到按钮的点击事件上。

完整代码

综上，以下是完整的商品价格计算器代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品价格计算器</title>
</head>
<body>
  <div id="app">
    <h1>商品价格计算器</h1>
    <p>单价：{{ price }}</p>
    <p>数量: <button v-show="num>0" @click="minus">-</button>{{num}}<button @click="plus">+</button></p>
    <p>总价：{{ total }}</p>
    <!-- 计算属性的使用直接通过插值语法使用 -->
  </div>

  <script src="../js/vue3.js"></script>
  <script>
    let vm = Vue.createApp({
      data() {
        return {
          price: 998,
          num: 1
        }
      },
      methods: {
        minus(){
          this.num--
        },
        plus(){
          this.num++
        }
      },
      // 计算属性配置项 实际应用中 某个数据是需要使用data中其他数据计算得到
      computed:{
        // 计算属性的具体配置是函数形式
        total(){
          // 必须返回一个数据
          return this.num*this.price
        }
      }
    })
    vm.mount('#app')
  </script>
</body>
</html>

输出效果：
在这里插入图片描述

监听器配置项 watch

提示：这里可以添加本文要记录的大概内容：

监听器配置项：监听某个数据的变化
定义函数：函数名必须是监听的数据名
Vue 调用此函数时会传入两个参：新值、旧值

Vue3 的监听器可以监听 Vue 实例中某个数据的变化，当这个数据变化时，就会自动执行相应的函数，这样可以实现一些自动更新页面、数据校验等功能。

具体来说，监听器主要有以下作用：

自动更新页面：当 Vue 实例的某个数据变化时，监听器可以自动更新相关的页面内容，而不需要手动修改 DOM。
数据校验：当 Vue 实例中的某个数据变化时，可通过监听器对输入的数据进行校验，保证数据的有效性。
数据同步：当 Vue 实例中的某个数据绑定到多个组件中时，可通过监听器实现数据的同步，保证数据的一致性。
监控数据变化：当 Vue 实例中的某个数据发生变化时，通过监听器可以获取到新旧值，从而实现数据的监控和统计。

Vue3 监听器是 Vue3 中非常重要的一个特性，它可以让我们的开发变得更加高效和灵活，使得我们能够更好地处理和管理数据。

简单类型写法

【示例代码】：
让数据减到零不再往下减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="minus">-</button>{{num}}
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
        data() {
            return {
                num: 1
            }
        },
        methods: {
            minus(){
                this.num--
            }
        },
    })
    vm.mount('#app')
</script>
</html>

这段代码使用了 Vue3 的 createApp 方法创建了一个 Vue 实例 vm，实现了一个简单的计数器功能，点击按钮可以将 num 值递减。具体解释如下：

首先，使用 createApp 方法创建了一个 Vue 实例 vm，这个实例包含了 data、methods 等选项。
在 data 中定义了 num 属性，初始值为 1。
在 methods 中定义了一个 minus 方法，当按钮被点击时，会将 num 的值减 1。
最后，使用 vm.mount 方法将 Vue 实例挂载到页面上的 #app 元素上，使其生效。

但是现在可以减到负数

接下来加上监听器，用这种方式控制num的数量，到零就不在让他往下减

        // 监听器配置项：监听某个数据的变化
        watch: {
            // 定义函数 函数名必须是监听的数据名
            // Vue 调用此函数时会传入两个参 新值 旧值
            num(a,b){
                this.num = a<0?0:a
                // a<0吗？如果小于0正常赋值
            }
        }

深度监听写法

如果监听的事件在对象中，那么监听器的写法必须是深度监听写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="minus">-</button>{{goods.num}}
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
        data() {
            return {
                goods: {
                    num: 1
                }
            }
        },
        methods: {
            minus(){
                this.goods.num--
            }
        },
        // 监听器配置项：监听某个数据的变化
        watch: {
            // 如果监听的事件在对象中，那么监听器的写法必须是深度监听写法
            goods:{
                deep:true,
                handler(a,b){
                    this.goods.num = a.num<0?0:a.num
                }
            }
        }
    })
    vm.mount('#app')
</script>
</html>