目录

一、事件绑定

1、点击事件两种写法

2、阻止form表单提交的默认事件

事件修饰符

按键修饰符

系统修饰符

鼠标按键修饰符

二、表单绑定

vue表单绑定修饰符

---

一、事件绑定

1、点击事件两种写法

@click="handleClick"

@click="handleClick($event)"

$event可以对dom元素进行获取或修改标签的属性

2、阻止form表单提交的默认事件

1.在表单上绑定事件@click="handleClick"，方法中写e.preventDefault()

2.直接在表单上绑定事件@click.prevent

事件修饰符

click.prevent

click.stop 阻止事件向外冒泡

click.self 只有点击绑定的标签本身才会触发事件

click.once 一次性事件，执行过以后接绑

click.capture 捕获事件，由外向内执行，与冒泡相反

click.native 可以给组件绑定原生事件

按键修饰符

@keydown 按键按下时触发事件

keydown.enter 按下回车键时触发事件

keydown.tab 按下tab键时触发事件

系统修饰符

keydown.ctrl 同时按住ctrl键,事件才会触发

keydown.alt

keydown.shift

keydown.mate

鼠标按键修饰符

@click.right/left/middle 鼠标右键点击/左键点击 事件分别触发

二、表单绑定

v-model 可以与单行文本框、多行文本框、单选、复选、select等标签绑定

vue表单绑定修饰符

1、v-model.lazy //文本框失去焦点时渲染

2、v-model.number //将输入内容转化为数字类型

3、v-model.trim // 读取input框的内容，然后去除首尾的空格