Vue的事件处理，点击事件

目录

1、 v-on:click 绑定属性示例：

2、 v-on:click 绑定方法示例：

3、 v-on:click 绑定特殊变量示例：

4、事件处理的修饰符 

        按键修饰符：

        v-model表单修饰符：

        v-bind指令修饰符：

---

---

        监听DOM事件使用的是v-on指令，该指令通常在模板中直接使用，在触发事件时会触发执行一些JavaScript代码。Vue.js提供了v-on指令的简写形式“@”，可用“@”来代替，如v-on:click可用简写成@click

1、 v-on:click 绑定属性示例：

   点击
   
{{count}}

2、 v-on:click 绑定方法示例：

   点击

3、 v-on:click 绑定特殊变量示例：

除了绑定到一个方法之外，v-on也支持内联JavaScript语句，但只可以使用一个语句，如果在内联语句中需要获取原生的DOM事件对象，可以将一个特殊变量$event传入方法之中

   点击

4、事件处理的修饰符 

.stop	阻止事件冒泡，等同于调用event.stopPropagation
.capture	捕获冒泡，使用capture模式添加事件监听器
.once	只触发一次回调，加上once之后prevent失效
.prevent	阻止标签的默认行为，等于调用event.preventDefault()
.passive	不阻止事件的默认行为
.self	将事件绑定到自身，只有自身才能触发

        按键修饰符：

按键	keyCode	别名
Enter	13	enter
Backspace	8	delete
Esc	27	esc
Left Arrow(←)	37	left
Up Arrow(↑)	38	up
Right Arrow(→)	39	right
Down Arrow(↓)	40	down
Tab	9	tab
Delete	46	delete
Spacebar	32	space
Shift	16	shift
Ctrl	17	ctrl
Alt	18	alt

        v-model表单修饰符：

lazy	光标离开标签的时候，将值赋予给value，进行数据同步
trim	自动过滤用户输入的首空格字符，而中间的空格不会过滤
number	自动将用户输入转换为数值类型，如果转换结果为NaN，则返回覆盖原始值

    
    
lazy示例,光标离开输入框时，值才会同步更新
    
    
当前输入：{{message}}

    
number示例
    
    
当前输入：{{message1}}

    
trim示例
    
    
当前输入：{{message2}}

 
 
 
 

        v-bind指令修饰符：

sync	对props进行一个双向绑定
prop	设置自定义标签属性，避免暴露数据，防止污染HTML结构
camel	将命名变为驼峰法命名法，如将hello_world属性名转换为helloWorld