浅谈Vue当中的绑定，包括属性绑定（v-bind，v-model）和事件绑定（v-on），和它们之间的区别

背景：“输出是最好的输入”，之前遇到过上面的问题，总是分不太清，记了又忘，故有学了一遍后决定在此做一次笔记，同时也算是一次输出，如果有不对的地方，还需要大家多多包涵，不吝赐教啊~

名词解释

开宗明义，概念先行！

属性

“名词和值”，具体到HTML中，就是元素中的属性，比如

（图源自MDN文档）

在p标签中，它的一个属性是上面的class=“editor-note”，class是名称，editor-note是值，那我们明确了本篇中所提到的属性，及元素标签的属性。

事件

MDN文档的解释是，事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码），通常可以用函数来表示。

比如：

1. 用户选择、点击或将光标悬停在某一元素上。
2. 用户在键盘中按下某个按键。
3. 用户调整浏览器窗口的大小或者关闭浏览器窗口。
4. 网页结束加载。
5. 表单提交。
6. 视频播放、暂停或结束。
7. 发生错误。

绑定

事件绑定：与标签和事件有关，比如button按钮，在上面添加了一些click事件时，这个行为就是一种事件绑定。

属性绑定：与标签有关，比如上面的p标签，添加了一个class样式（这个class本身是一种属性），这个行为就是一种属性绑定。

名词解释完啦，接下来就是关于v-bind，v-model和v-on的详解啦！

语法糖

更简练的言语表达较复杂的含义。代入到前端代码就是，是在不改变其功能的情况下，通过改变代码的写法，让代码更具有可读性，更容易被理解。

v-on

定义

给元素绑定事件监听器。

1.  当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。（注意：自定义事件是组件通信的内容，我们另外再系统讲！）
2.  当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
3.  v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

语法

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

监听子组件的自定义事件 (当子组件的“my-event”事件被触发，处理函数将被调用)：

<MyComponent @my-event="handleThis" />

<!-- 内联声明 -->
<MyComponent @my-event="handleThis(123, $event)" />

（参考vue文档！）

v-bind

定义

动态的绑定一个或多个 attribute，也可以是组件的 prop。（源于vue文档）

（注意：那我们这里主要讲绑定attribute，至于组件的prop是属于组件通信的内容，我们另外再系统讲！）

语法

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>



<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

（以上源于vue文档）

特点

1. 数据单向变化

v-bind的绑定是单向的,即data或者computed的数据---->绑定的标签

可以这么理解，

来自data或者computed的数据变了，绑定的地方数据跟着变，

绑定的地方数据变了，但data或者compted的数据不变，仍是原始数据。

2. 单值或者多值绑定

这个很好理解，从上面提供的代码可以看出，而强调一点，多值绑定形式多样，数组和对象均可实现！

v-model（表单输入绑定）

缘起

（以下参考了vue文档）

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

<input
  :value="text"
  @input="event => text = event.target.value">

v-model应运而生，简化了这一步骤

<input v-model="text">

所以到这里，可以给v-model下个定义，它是实现将data数据和标签数据双向绑定的一个指令，更多时候是用在表单中！从上面也可以看出，它是v-bind和v-on的语法糖。

语法

用法这里主要聚焦于表单中，包括 文本绑定，多文本绑定，复选框，单选按钮，选择器，还有像.lazy,.number,.trim修饰符等~

在vue文档中有非常详细的介绍，我就不一一列举了，小伙伴们可以之间点进这里面浏览一番~

特点

1. 数据视图双向绑定

即data的数据变了，标签的数据跟着变，

   标签的数据变了，data的数据也会变。

2. 可以理解为v-bind和v-on的语法糖

v-bind，v-model的区别

至于这两个的区别，就是前者是数据视图单向绑定，后者是数据视图双向绑定

本文同时介绍了v-on，也是为了更好地理解v-bind和v-model的区别，可以将v-model看成是v-bind和v-on的一个语法糖~

结语

本文大量例子参考了vue文档，小伙伴们如果遇到什么不理解的，超级推荐去看文档喔，这样可以系统知道这个设计为何而来，是为了解决什么问题，那用在哪里也就自然而然知道啦，最后如果有帮到大家则倍感荣幸，如果有不对的地方还请多多包涵，不吝赐教啊~

拜拜啦~