Vue常用的事件绑定和表单的使用

一、事件绑定的方法

v-on后跟事件的参数就称为事件绑定，可以简写为@click

二、事件的参数了解

1、@click=“sayNum”：默认传入事件对象

2、@click=“sayNum(3)”：传入参数3

3、@click=“sayNum($event，3)”：传入事件对象和参数3

三、事件绑定中常用的修饰符

1、事件修饰符

（1）.stop：阻止事件的冒泡行为

（2）.prevent：阻止事件的默认行为

（3）.once：只响应一次

2、按键修饰符

（1）keydown

（2）keyup

常用的一些按键：.enter(回车)、.up(上)、.down(下)、.left(左)、.right(右)、.space(空格)、.esc(返回)、.del(删除)...等等

3、系统修饰符

常用的：.ctrl、.shift、.meta、.alt...等等

4、鼠标修饰符

表单

v-model=“num：把num的数据和表单的值绑定在一起

一、表单内部操作：单行，多行，单选，多选，下拉select

当多选时：一个默认值选中为true，未选中为false，多个值，绑定的数组动态添加、移出当前元素的value值

二、常用的表单修饰符

1、.number：字符串转数字

2、.lazy和.change：事件触发数据更新

三、v-model：“num”简写

：value=“num”    或    @input=“num=$event.target.value”

四、表单内部vue的操作

（1）让指令联接数据与dom

（2）业务操作数据，实现自动更新dom

computed计算：从现有的数据计算出新的数据（只读）

watch监听：监听数据的变化执行回调函数