Vue.js 允许我们处理用户触发的事件. 处理事件有助于通过响应用户的输入来增加 Web 应用程序的互动性. Vue 为我们提供了处理这些事件的 v-on 指令。
《V》
用户与视图的交互可以触发 DOM 上的事件,如点击和键入,我们可以使用 v-on 指令来处理这些事件。
作为一个简单的例子,我们可以实施一个计数器,该计数器每次用户点击按钮都会加倍,让我们从数据模型中初始化计数器为零开始:
1data() {
2 return {
3 count: 0
4 }
5}
在视图中,我们可以定义按钮时要运行的方法:
1<label>Count is: {{count}}</label>
2<button v-on:click="count++">Increment</button>
v-on 会触发指定的表达式或方法,当点击事件在按钮元素上触发时。
在此示例中,它将计数值增加1。
强制性方法 v-on
我们可以将方法与使用它们的名称的事件联系起来。
1<input v-model="addValue">
2<button v-on:click="addToCount">Add</button>
该模板中指定的addToCount方法可以在模型中如下定义。
1methods: {
2 addToCount: function() {
3 this.count = this.count + parseInt(this.addValue);
4 }
5}
addToCount方法将从addValue中获取输入,并将其添加到计数中。
简介: v-on
而不是使用v-on:语法来声明事件,我们可以使用 @ 符号:
1<button @click="addToCount">Add</button>
变化事件
在处理事件时经常使用的呼叫,Vue使我们通过使用修改器更容易实现这些。
例如,event.preventDefault()通常在处理事件时被调用,以防止浏览器的默认行为。
而不是在方法中写出这些,我们可以使用视觉指令提供的修改器。
1<a href="test" @click.prevent="addToCount">Add</a>
上面的代码样本会删除a标签的默认行为,只需调用addToCount方法. 如果我们没有添加修改程序,页面将尝试重定向到href属性中定义的路径。
以下修改器可在Vue中使用。
- stop - 防止事件爆炸到DOM树
- prevent - 防止默认行为
- ** capture** - 捕捉模式用于事件处理
- 自我 - 只有当事件的目标本身
- once - 运行函数最多一次
关键变更
类似于事件编辑器,我们可以添加关键编辑器,允许我们在处理密钥相关事件时聆听特定密钥。
1<input v-on:keyup.13="addToCount" v-model="addValue">
在上面的示例中,当使用 13(输入密钥)的密钥代码启动密钥事件时,将调用addToCount方法。
由于很难记住所有密钥代码,Vue 提供了一组预定义的密钥,其中一些例子包括 enter、tab、delete、esc、space 和 left。
此外,您可以为关键代码设置自己的代码,如下:
1Vue.config.keyCodes.a = 65