浅谈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的详解啦！<