用v-on指令或者@监听DOM事件，并在触发时运行一些JavaScript代码；
参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
Vue中常用的按键别名：
回车 =>enter、删除 =>delete (捕获“删除”和“退格”键)、退出 =>esc、空格 =>space、换行 =>tab (特殊，必须配合keydown去使用)、上 =>up、下 =>down、左 =>left、右 =>right等。
代码案例
模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。
代码案例
通过watch来响应数据的变化。
代码案例
class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。
1、字符串写法适用于：类名不确定，要动态获取。
2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式，写法：:style="{fontSize: xxx}"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。
代码案例
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签，输入js代码：if ($('input').val() !== '') {$('body').append('非空')}。
3、浏览器运行index.html页面，此时会打印出js非空验证的结果。
父组件调用子组件的方法，可以传递数据。父组件：
子组件：
子组件调用父组件的方法并传递数据。
子组件：
父组件：
兄弟组件之间相互传递数据。
首先创建一个vue的空白实例（兄弟组件的桥梁）
子组件a:发送放使用$emit自定义事件把数据带过去。
子组件b:接收方通过$on监听自定义事件的callback接收数据
父组件：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
将on变成once，即只执行一次。
移除自定义事件监听器，语法：vm.$off( [event, callback] )
如果没有提供参数，则移除所有的事件监听器；（注意这条，一般在main.js中，移除所有事件绑定）
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
