VUE基础之事件处理
v-on：something用于绑定事件监听器，监听DOM变化来触发事件（something），可简写为@something。
<div id="app">
<button type="button" @click="click">点击我获取信息</button>
<p>{{msg}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '等待点击。。。'
},
methods: {
click: function() {
this.msg = '按钮被点击啦';
}
}
});
我们也可以在调用的方法中访问原生DOM事件
<div id="app">
<input type="text" @change="prompt"/>
<p>{{msg}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '等待输入。。。'
},
methods: {
prompt: function(event) {
this.msg = event.target.value;
}
}
});
事件修饰符：VUE通过事件修饰符为DOM事件进行很多细节上的处理，能让我们更加专注于代码逻辑中。
- .stop：相当于event.stopPropagation()，防止事件冒泡，例子如下：
原本点击按钮应该会出现两次弹窗，但是.stop阻止了事件往外层传递，结果只出现内层弹窗
<div id="app">
<div @click="outer">
<button @click.stop="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('这是内层button');
},
outer: function() {
alert('这是外层 div，可是.stop阻止了我');
}
}
});
- .prevent：相当于event.preventDefault()，防止执行默认操作，可以只有修饰符不用调用函数。例子如下：
<div id="app">
<a href="www.baidu.com" @click.prevent>我是一条假链接</a>
</div>
var vm = new Vue({
el: '#app'
});
- .capture：事件捕捉模式，事件从外到内触发，与事件冒泡含义相反，例子如下：
<div id="app">
<div @click.capture="outer">
<button @click .capture="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('这是内层button');
},
outer: function() {
alert('这是外层 div，我会先触发哦~');
}
}
});
- .self：只触发自身事件，对父子元素无效，例子如下：
<div id="app">
<div @click.self="outer">
<button @click .self="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('这是内层button，你点谁就触发谁');
},
outer: function() {
alert('这是外层 div，你点谁就触发谁');
}
}
});
- .once：只触发一次事件，例子如下：
<div id="app">
<button @click .once=" once ">button</button>
</div>
var vm = new Vue({
el: '#app'
methods: {
once: function() {
alert('点击事件只会执行一次哦');
}
}
});
