版权声明:出处http://blog.****.net/qq20004604
资料来于官方文档:
http://cn.vuejs.org/guide/events.html
本文是在官方文档的基础上,更加细致的说明,代码更多更全。
简单来说,更适合新手阅读
(二十二)方法处理器
①v-on的标准用法
用于监听DOM事件,典型的就是v-on:click,处理的方法放在methods属性里
会默认传一个参数,代码如下:
- <button @click="test">点击</button>
- methods: {
- test: function (evt) {
- console.log(evt);
- }
- }
这里的evt,是标准的鼠标点击事件,类似jQuery的click事件的回调函数中的参数。
可以通过this来找到data属性里的值(或许也能找到其他几个),例如:
- data: {
- items: "test"
- },
- methods: {
- test: function (evt) {
- console.log(this.items);
- console.log(evt);
- }
- }
这里的this.items,就是data的items这个变量;
②内联语句处理器
给v-on事件传一个固定参数
- <button @click="test('a')">点击搜索age</button>
当这个时候,函数的第一个参数就不是鼠标点击事件了,而是字符串a
- test: function (mes) {
- console.log(mes);
- }
mes的值是’a’
$event
如果需要给他一个像上面一样的鼠标点击事件时,则使用$event作为参数(他和不传参数时的默认鼠标事件对象是相同的);
使用Vue实例的变量
如果需要传一个data属性里的值,则直接放属性名
例如:
- <div id="app">
- <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- items: "test"
- },
- methods: {
- test: function (msg, evt) {
- console.log(msg);
- evt.preventDefault();//阻止默认动作,比如这里是页面跳转
- }
- }
- })
- </script>
输出:test和BUTTON
③事件修饰符(针对v-on)
修饰符 |
效果 |
备注 |
.prevent |
阻止html元素的默认事件 |
类似evt.preventDefault() |
.stop |
阻止事件冒泡 |
|
keyup.数字 |
当该数字表示的按键弹起时 |
有别名 |
keyup.enter |
回车 |
按下回车时 |
keyup.tab |
Tab按钮 |
tab切入该input时 |
keyup.delete |
del键 |
会导致原始的delete删除功能失效 |
keyup.esc |
esc键 |
按下esc时 |
keyup.space |
空格键 |
不会使空格功能失效(即按下空格时,既空格,又触发事件) |
keyup.up |
键盘方向键的上 |
上键同时会使光标到输入框的最左边 (焦点在输入框时才生效,按键弹起时生效,下同) |
keyup.down |
键盘方向键的下 |
到输入框的最后面 |
keyup.left |
方向左键 |
光标左移 |
keyup.right |
方向右键 |
光标右移 |
.self |
当前元素本身(非子元素)时触发事件 |
类似冒泡的时候找最顶层,一般用于click之类的鼠标事件(1.0.16之后) |
.capture |
按照capture模式来处理 |
简单来说,根据我推测,是根据捕获顺序触发冒泡(原本模式是后捕获先冒泡,这个正好相反)(1.0.16之后) |
对于.self来说,例如以下代码:
- <div id="app">
- <div @click.self="test" class="a">
- <div class="b">
- </div>
- </div>
- </div>
- <script>
- var test = {name: "test"};
- var vm = new Vue({
- el: '#app',
- data: {
- items: "test"
- },
- methods: {
- test: function (evt) {
- console.log(evt);
- }
- }
- })
- </script>
只有当点击到非div class=’b’的区域时,才会触发事件;
④自定义按键别名:
规范:
Vue.directive(“on”),keyCode.别名 = 按键码;
示例:
- Vue.directive("on").keyCode.z = 122;
这个指键盘码为122(小写z)的别名命名为z,当按键键盘的z键时(无论大小写),都会触发事件。
注意,这个要写在实例声明之后(推测是要含有该按键的template被创建后才有效)