Vue：事件对象调用、修饰符；表单绑定、修饰符

==== 事件对象调用 ====

事件调用的时候有两种写法：①直接写函数名 ②在函数名后面加一个括号，括号里第一个参数规定是事件对象（规定写法$event）

（1）直接写函数名，例如@click="hanleClick"，methods中：handleClick：function（e）{console.log(e);} 直接使用

（2）绑定事件时在（）中传参，括号必须传入参数$event，且必须写在第一个参数，（$event是VUE内置的事件对象），好处是可以传其他参数进去：@click="hanleClick($event,1,2)"

==== 事件修饰符 ====

---

（1）@click.prevent：阻止事件的默认行为（@click.prevent="handle"；例如在表单form标签中有一个button按钮，点击按钮默认会调转到form中定义的地址，这就是默认行为）

（2）@click.stop：阻止事件冒泡

（3）@click.self：如果有父元素和子元素都有点击事件，只有点击当前这一级标签的时候才会触发事件，点击子元素标签不会触发事件。

【e.target表示触发事件的该DOM元素节点，e.target.value表示获取该结点的值】

（4）@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行

（5）@click.capture：把冒泡改成捕获机制

---

==== 按键修饰符 ====

@keydown：某键按下时才会触发的事件

（2）@keydown.enter：只有enter键按下，才会触发的事件

（3）@keydown.tab：只有tab键按下，才会触发的事件

---

==== 系统修饰符 ====

ctrl、alt、shift、meta

要触发绑定的函数，不仅要按下按键，同时还需要按下相应的系统修饰符按键。例如：@keydown.ctrl="handle"，必须同时按下ctrl键和其他的按键才能执行handle函数。

---

==== 鼠标修饰符 ====

（1）@click.right：只有点击鼠标右键才会执行。

（2）@click.left：只有点击鼠标左键才会执行。

（3）@click.middle：只有点击鼠标中键才会执行。

---

---

==== 表单绑定 ====

v-model双向绑定指令只能在input、select、textarea这三类标签上使用

（1）用在select标签时，推荐第一项设置为‘--请选择--’，增强用户体验。

（2）用在select标签时，如果给option设置value属性，select的value是选中的option的value属性的值；如果option没有设置value值，那默认select取option的文本innerText

---

==== 表单绑定的修饰符 ====

【表单修饰符主要是针对表单输入的。所以说修饰符一般是针对可以输入内容的input和textarea标签使用的。】

（1）v-model.lazy：当失去焦点（按下回车键也会失去焦点）的时候才会同步数据

（2）v-model.number：把输入框里的内容尽量转换为number类型【input框里不管输入什么内容，都会默认为string类型】

（3）v-model.trim：去掉输入框里的首尾空格