前言

接着之前的学习(详情之前的文章)，今天我们要讲的是

csharp 复制代码

v-bind
v-on

到此，常用的指令我们就要讲完了(在为大家讲解时，用的是选项式API，这样是为了方便大家理解)，还有一些会在后续使用到的时候再给大家讲解。并且本篇文章还会穿插一些选项式API的知识点。

其他不常用指令

v-bind

v-bind 用于动态地将一个或多个 HTML 属性绑定到 Vue 实例中的数据。它是 Vue 的数据绑定系统的一部分，允许你在 HTML 中使用 Vue 实例中的数据，实现数据与视图的双向绑定。

在 Vue.js 中，v-bind 的一般用法是通过简化的缩写 : 来表示。

来看一个例子：当我们要往页面引入一张图片，常规做法是这样

ini 复制代码

 <img src="https://img1.baidu.com/it/u=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">

而使用v-bind则会方便许多,或者使用简化版，前面加个 :就行。

ini 复制代码

 <img width = "200" v-bind:src="imgUrl" alt="">
 <img width = "200" :src="imgUrl" alt="">

在数据源中写好 imgUrl (bind绑定的属性)地址。

javascript 复制代码

data() {
     return{
     imgUrl:'https://img1.baidu.com/it/u=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                }
            },

v-on

v-on 用于监听 DOM 事件，并在事件触发时执行相应的事件处理函数。通过 v-on，你可以在 Vue 实例中定义事件处理逻辑，实现用户与应用程序的交互。

v-on 的一般语法是通过简化的缩写 @ 来表示。

实现一个按钮，每点一次数据加1

xml 复制代码

<!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"></div>
    <template id="my-app">
        <h2>{{ count }}</h2>
        <button @click="handleAdd">+</button>
    </template>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script>
        Vue.createApp({
            template: '#my-app',
            data() {
                return{
                    count: 1
                }
            },
            methods : {
                handleAdd(){
                    this.count += 1

                }
            }
        }).mount('#app')
    </script>
</body>
</html>

在template中给button按钮一个监听事件，在method中写好该事件执行的加1操作

选项式API------computed

computed 是 Vue.js 框架中的一个属性，用于在 Vue 实例中声明计算属性。计算属性是基于 Vue 实例的数据属性计算而来的属性，它的值会根据相关的数据属性的变化而自动更新。

通过 computed，你可以在 Vue 实例中定义一些衍生出来的属性，而这些属性的值是通过对其他属性进行计算而得到的。这有助于将模板中的逻辑保持简单，而把复杂的计算过程放在计算属性中。

实现如下效果：根据当前温度建议你穿衣。

xml 复制代码

<!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"></div>

  <template id="my-app">
    <h2>当前温度：{{temp}}</h2>
    <h3>建议穿：{{cloth}}</h3>

    <button @click="minus">-5</button>
    <button @click="add">+5</button>

  </template>


  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          temp: 20,
          // cloth: '夹克'  //不能与computed中的属性同名，或者说computed中的属性不需要写进数据源中
        }
      },
      computed: { // 计算属性是响应式执行的
        cloth() { // 函数会在所依赖的变量值发生改变时自动重新执行
          if (this.temp <= 10) {
            return  '棉袄'
          } else if (this.temp <= 20) {
            return '夹克'
          } else {
            return '短袖'
          }
        }
      },
      methods: {
        minus() {
          this.temp -= 5
        },
        add() {
          this.temp += 5
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

注意computed也是写在vue.createApp下，和data同级，上下顺序没有规定。

效果如下：（自己也可以体验一下）

选项式API------watch

在Vue.js中，watch 是一个用于观察 Vue 实例数据变化的选项。通过使用 watch，你可以在数据变化时执行自定义的函数，从而执行一些操作，如异步请求、复杂计算等。

watch 选项可以接收一个对象，对象的属性是要观察的数据属性，而属性值是一个回调函数，用于处理数据变化的逻辑。

还是实现如上效果，我们注意观察代码区别：

xml 复制代码

<!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"></div>

  <template id="my-app">
    <h2>当前温度：{{temp}}</h2>
    <h3>建议穿：{{cloth}}</h3>

    <button @click="minus">-5</button>
    <button @click="add">+5</button>

  </template>


  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          temp: 30,
          cloth: '夹克'
        }
      },
      watch: {
        temp: {
          handler: function (newVal, oldVal) {
            if (newVal <= 10) {
              this.cloth = '棉袄'
            } else if (newVal <= 20) {
              this.cloth = '夹克'
            } else {
              this.cloth = '短袖'
            }
          },
          immediate: true  // 立即执行
        }
      },
      methods: {
        minus() {
          this.temp -= 5
        },
        add() {
          this.temp += 5
        }
      }
    }).mount('#app')
  </script>
</body>

</html>

computed 和 watch的区别

如果你需要计算一个新的属性值，并希望该值是基于其他数据属性的动态计算得出的，而且希望有缓存机制，那么应该使用 computed。
如果你需要在某个数据变化时执行异步或复杂的操作，或者需要监听某个数据的变化做出相应的响应，那么应该使用 watch。
通常情况下，如果你只是简单地获取或设置数据，并且希望有一些自动的处理，使用 computed 更直观。如果需要执行一些特定逻辑，使用 watch 更灵活。

vue指令，你真得懂

前言

v-bind

v-on

选项式API------computed

选项式API------watch

computed 和 watch的区别