Vue的介绍 (中)持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天属性绑定指令如果需要

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天

属性绑定指令

如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。用法示例如下：

使用 JavaScript 表达式

在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持JavaScript表达式的运算例如：

{{number + 1}} {{ok ? 'YES' : 'NO' }} {message.split('').reverse().join('') }}

事件绑定指令

Vue 提供了 v-on事件绑定,用来辅助程序员为 DOM 元素绑定事件监听,语法格式如下：

count 的值为：{{count}}
注意：原生 DOM 对象有onclick、oninput。onkeyup等原生事件,替换为vue的事件绑定形式后,分为别:v-on:click、v-on:input、v-on:keyup

6-1. 事件绑定指令 ---- V-on

通过 v-on 绑定是hi见处理函数：需要在 methods 节点中进行声明:

 const vm = new Vue({
    // el 属性是 固定的写法,表示当前 vm 实例要控制页面上的哪个区域,接收的值是一个选择器
    el: '#app',
    // data 对象就是要渲染到页面上的数据
    data: {
        count: 0
    },
    // 定义处理函数
    methods: {     // v-on 绑定的事件处理函数,需要声明在 methods 节点中
        addCount(){      // 事件处理函数的名字
          // this 表示当前 new 出来的 vm 实例对象,
          // 通过 this 可以访问到 data 中的数据
          this.count += 1
        }
    }
})

6-2. 事件绑定简写形式 ---- V-on

由于 v-on 指令在开发中使用频率非常高,因此,vue官方为其提供了简写形式(简写为英文的 @ )

count 的值为：{{count}}

 <!-- 完整写法 -->
 <button v-on:click="addCount">+1</button>

 <!-- 简写形式,把 v-on：简写成 @ 符号 -->
 <!-- 如果事件处理函数中的代码足够简单,只有一行代码,则可以简写到行内 -->
 <button @click="count += 1">+1</button>

事件参数对象

在原生的 DOM 事件绑定中,可以在事件处理函数的形参处,接收事件参数对象event。同理,在v-on 指令 (简写为 @ ) 所绑定的事件处理函数中,同样可以接收到事件参数对象event,示例代码如下：
```
 <h3>count 的值为：{{count}}</h3>
 <button v-on:click="addCount">+1</button>
```

methods: {
    addCount(e) {   // 接收事件参数对象 event, 简写为 e
        const nowBgColor=e.target.style.backgroundColor
        e.target.style.backgroundColor = nowBgColor === 'red' ? '' : 'red'
        this.count += 1
    }
}

7-1. 绑定事件并传参

在使用 v-on 指令绑定事件时,可以使用 ( ) 进行传参,实例代码如下:
```
 <h3>count 的值为：{{count}}</h3>
 <button @click="addNewCount">+2</button>
```

methods: {
    addCount(step) {   // 在形参处用 step 接收传递过来的参数值
        this.count += step
    }
}

8. $event

$event 是vue提供的特殊变量,用来表示原生的事件参数对象 event。$ event 可以解决事件参数对象 event 被覆盖的问题。示例用法如下：
```
<h3>count 的值为：{{count}}</h3>
<button @click="addNewCount(2,$event)">+2</button>
```

methods: {
    addNewCount(step) {   // 在形参处用 step 接收传递过来的参数值
         const nowBgColor=e.target.style.backgroundColor
         e.target.style.backgroundColor = nowBgColor === 'cyan' ? '' : 'cyan'
         this.count += step
    }
}