事件绑定与监听
当模板渲染完成之后，就可以进行事件的绑定与监听了。Vue.js 提供了 v-on 指令用来监听 DOM 事件，通常在模板内直接使用，而不像传统方式在 js 中获取 DOM 元素，然后绑定事件。例如：
<button v-on:click="say">Say</button>
方法及内联语句处理器
通过 v-on 可以绑定实例选项属性 methods 中的方法作为事件的处理器，v-on: 后参数接受所有的原生事件名称。
示例：
<!DOCTYPE html>
<html>
<head>
<title>方法(methods)及内联语句处理器</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
v-on：<button v-on:click="say">Say_1</button><br>
@：<button @click="say">Say_2</button><br>
<!-- 同一元素上也可以通过 v-on 绑定多个相同事件函数，执行顺序为顺序执行， -->
<button v-on:click="say2('Jack'),say2('Davi')">Say_3</button><br>
</div>
<script type="text/javascript">
//定义数据
var data = {
}
var vm = new Vue({
el: "#app",
data: data,
methods: {
say: function () {
alert("Hello Vue.js")
},
say2: function (name) {
console.log(name + "--------->Hello Vue.js !!!!!!!!!!")
alert(name + "--------->Hello Vue.js !!!!!!!!!!")
}
}
});
</script>
</body>
</html>
修饰符
Vue.js 为指令 v-on 提供了多个修饰符，方便我们处理一些 DOM 事件的细节，并且修饰符可以串联使用。主要的修饰符如下
.stop: 等同于调用 event.stopPropagation()。
.prevent: 等同于调用 event.preventDefault()。
.capture: 使用 capture 模式添加事件监听器。
.self: 只当事件是从监听元素本身触发时才触发回调。
示例：
<!DOCTYPE html>
<html>
<head>
<title>方法(methods)及内联语句处理器</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 阻止表单默认提交事件 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 阻止默认提交事件且阻止冒泡 -->
<form v-on:submit.stop.prevent="onSubmit"></form>
<!-- 也可以只有修饰符，并不绑定事件 -->
<form v-on:submit.stop.prevent></form>
<!--除了事件修饰符之外，v-on 还提供了按键修饰符，方便我们监听键盘事件中的按键。 -->
<input v-on:keyup.13="handleClick" value="鼠标选中，点击回车触发"><br>
<input v-on:keyup.enter="handleClick" value="鼠标选中，点击回车触发">
</div>
<script type="text/javascript">
//定义数据
var data = {
}
var vm = new Vue({
el: "#app",
data: data,
methods: {
handleClick: function (){
alert("Hello Vue !!!!!!!!!!!")
}
}
});
</script>
</body>
</html>
与传统事件绑定的区别
1、无需手动管理事件。ViewModal 被销毁时，所有的事件处理器都会自动被删除，让我们从获取 DOM 绑定事件然后在特定情况下再解绑这样的事情中解脱出来。
1、解耦。ViewModel 代码是纯粹的逻辑代码，和 DOM 无关，有利于我们写自动化测试用例
网友评论