1.事件处理
（1）指令的语法格式
<标签 v-指令名:事件名="表达式">{{插值语法}}</标签>
（2）"表达式"位置都可以写什么？
常量、JS表达式、Vue实例所管理的XXX
1.1 事件绑定
（1）在Vue当中完成事件绑定需要的指令：v-on指令
（2）语法格式：v-on:事件名=“表达式”
（3）例如：
①v-on:click=“表达式” 表示当鼠标单机事件之后，执行表达式
②v-on:keydown=“表达式” 表示当发生键盘按下事件之后，执行表达式
（4）在Vue当中，所有事件所关联的回调函数，需要在Vue实例的配置项methods中进行定义。methods是一个对象：{}，在这个methods中可以定义多个回调函数
（5）v-on指令的简写形式：
①v-on:click 简写为@click
②v-on:keydown简写为@keydown
（6）绑定的回调函数，如果函数调用时不需要传递任何参数，小括号（）可以省略
（7）Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象。
（8）在绑定回调函数的时候，如果已经传了自己定义的对象，可以在回调函数的参数上加上$event 占位符，Vue框架看到这个占位符之后，会自动将当前事件以对象的形式传过去。
<body>
<div id="app">
<button @click="sayHi($event,'abc')">hi button2</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:'vues'
},
methods:{
sayHi(event,name){
console.log(event,name);
}
}
})
</script>
</body>
1.2 methods详情
（1）methods对象中的方法可以通过vm去访问；methods中的箭头函数中的this是从父级作用域当中继承的，对于当前程序来说，父级作用域是全局作用域：window
1.3 事件修饰符
（1）.stop：停止事件冒泡，等同于event.stopProagation()
<body>
<div id="app">
<!-- 停止事件冒泡 -->
<div @click="san">
<div @click="er">
// 如果不加会出现1 2 3，加了就只显示1
<button @click.stop="yi">事件冒泡</button>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:'事件修饰符'
},
methods: {
yi(){
alert(1)
},
er(){
alert(2)
},
san(){
alert(3)
}
}
})
</script>
</body>
（2）.prevent：等同于event.preventDefault() 阻止事件的默认行为
<body>
<div id="app">
<h1>{{msg}}</h1>
// 使用 .prevent 后就不会跳转到百度页面了
<a href="https://www.baidu.com" @click.prevent="yi">百度</a>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:'事件修饰符'
},
methods: {
yi(){
alert('去百度')
}
}
})
</script>
</body>
（3）.capture：添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式：
①从内到外添加（事件冒泡模式）：下面例子打印 1、2、3
②从外到内添加（事件捕获模式）：下面例子打印 3、2、1
<body>
<div id="app">
<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="san">
<div @click.capture="er">
<button @click.capture="yi">添加事件监听器时使用事件捕获模式</button>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
yi(){
alert(1)
},
er(){
alert(2)
},
san(){
alert(3)
}
}
})
</script>
</body>
（4）.self：这个事件如果是“我自己身上的元素”发生的事件，不是别人传递过来的，则执行相应的程序
<body>
<div id="app">
<div @click="san">
// 此时2就不会显示出来
<div @click.self="er">
<button @click="yi">使用.self</button>
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
yi(){
alert(1)
},
er(){
alert(2)
},
san(){
alert(3)
}
}
})
</script>
</body>
（5）.once：事件只发生一次
1.4 按键修饰符
（1）.enter
（2）.tab（必须配合keydown事件使用）
（3）.delete (捕获“删除”和“退格”键)
（4）.esc
（5）.space
（6）.up
（7）.down
（8）.left
（9）.right
<body>
<div id="app">
<!-- 回车后触发方法 -->
<input type="text" @keyup.enter="getInfo"><br>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
getInfo(event) {
console.log(event.target.value)
}
}
})
</script>
</body>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Vue2事件处理(v-on)
发表评论 取消回复