计算属性配置项 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>