Vue 2.0学习（七）方法与事件

基本用法

　　以监听一个按钮的点击事件为例，设计一个计数器，每次点击都加1：

<div id = "app">
    点击次数：{{ counter }}
    <button @click="counter++">+1</button>
</div>

<script>
    new Vue({
         el: '#app',
         data:{
             counter: 0
         }
    })
</script>

　　@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名，比如再增加一个按钮，点击一次，计数器加10：

<div id = "app">
    点击次数：{{ counter }}
    <button @click="handleAdd()">+1</button>
    <button @click="handleAdd(10)">+10</button>
</div>

<script>
    new Vue({
         el: '#app',
         data:{
             counter: 0
         },
         methods:{
             handleAdd: function(count) {
                 count = count || 1;
                 //this指向当前Vue实例app
                 this.counter += count;
             }
         }
    })
</script>

　　在methods中定义了我们需要的方法供@click调用，需要注意的是，@click调用的方法名后可以不加括号。此时，如果该方法有参数，默认会将原生事件对象event传入，可以尝试修改为@click="handleAdd"，然后在handleAdd内打印出count参数看看。在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。

　　这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无需自己清理。

　　Vue提供了一个特殊变量$event,用于访问原生DOM事件，例如下面的实例可以阻止链接打开：

<div id = "app">
    <a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
</div>

<script>
    new Vue({
         el: '#app',
         data:{
             counter: 0
         },
         methods:{
             handleAdd: function(message, event) {
                 event.preventDefault();
                 window.alert(message);
             }
         }
    })
</script>

 

修饰符

　　在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点"."，再跟一个后缀来使用修饰符。Vue支持以下修饰符：

　　♦ .stop

　　♦ .prevent

　　♦ .capture

　　♦ .self

　　♦ .once

　　具体的用法：

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle">...</div>
<!-- 只触发一次，组件同样适用 -->
<div @click.once="handle">...</div>

　　在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<!-- 只有在keycode是13时调用vm.submit() -->
<input @keyup.13="submit">

　　也可以自己配置具体按键：

Vue.config.keyCodes.f1 = 112;
//全局定义后，就可以使用@keyup.f1

　　除了具体的某个keyCode外，Vue还提供了一些快捷名称，以下是全部的别名：

　　♦ .enter

　　♦ .tab

　　♦ .delete(捕获删除和退格键)

　　♦ .esc

　　♦ .space

　　♦ .up

　　♦ .down

　　♦ .left

　　♦ .right

　　这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

　　♦ .ctrl

　　♦ .alt

　　♦ .shift

　　♦ .meta(Mac下是Command键，Windows下是窗口建)

<!-- Shift + S -->
<input @keyup.shift.83="handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 

未完待续。。。