<!--
1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件
2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"
3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <button onclick="alert('lnj')">我是按钮</button>-->
<!--
注意点:
1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称
-->
<!-- <button v-on:click="alert('lnj')">我是按钮</button>-->
<!--
注意点:
当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
-->
<!-- <button v-on:click="myFn">我是按钮</button>-->
<button @click="myFn">我是按钮</button>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
methods: {
myFn(){
alert('lnj')
}
}
});
</script>
v-on修饰符
<!--
1.v-on修饰符
在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等
那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理
2.常见修饰符
.once - 只触发一次回调。
.prevent - 调用 event.preventDefault()。
.stop - 调用 event.stopPropagation()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.capture - 添加事件侦听器时使用 capture 模式。
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--注意点: 默认情况下事件的回调函数可以反复的执行, 只要事件被触发就会执行-->
<!-- <button v-on:click="myFn">我是按钮</button>-->
<!--如果想让事件监听的回调函数只执行一次, 那么就可以使用.once修饰符-->
<!-- <button v-on:click.once ="myFn">我是按钮</button>-->
<!--如果想阻止元素的默认行为, 那么可以使用.prevent修饰符-->
<!-- <a href="http://www.it666.com" v-on:click.prevent="myFn">我是A标签</a>-->
<!--
默认情况下载嵌套的元素中, 如果都监听了相同的事件, 那么会触发事件冒泡
如果想阻止事件冒泡, 那么可以使用.stop修饰符
-->
<!--<div class="a" @click="myFn1">
<div class="b" @click.stop="myFn2">
<div class="c" @click="myFn3"></div>
</div>
</div>-->
<!--
如果想让回调只有当前元素触发事件的时候才执行, 那么就可以使用.self修饰符
-->
<!--<div class="a" @click="myFn1">
<div class="b" @click.self="myFn2">
<div class="c" @click="myFn3"></div>
</div>
</div>-->
<!--
默认情况下是事件冒泡, 如果想变成事件捕获, 那么就需要使用.capture修饰符
-->
<div class="a" @click.capture="myFn1">
<div class="b" @click.capture="myFn2">
<div class="c" @click.capture="myFn3"></div>
</div>
</div>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
myFn(){
alert('lnj');
},
myFn1(){
console.log("爷爷");
},
myFn2(){
console.log("爸爸");
},
myFn3(){
console.log("儿子");
}
}
});
</script>
v-on的注意点
<!--
1.v-on注意点
1.1绑定回调函数名称的时候, 后面可以写()也可以不写
v-on:click="myFn"
v-on:click="myFn()"
1.2可以给绑定的回调函数传递参数
v-on:click="myFn('lnj', 33)"
1.3如果在绑定的函数中需要用到data中的数据必须加上this
-->
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="myFn('lnj', 33, $event)">我是按钮</button>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
gender: "man"
},
// 专门用于存储监听事件回调函数
methods: {
myFn(name, age, e){
// alert('lnj');
// console.log(name, age, e);
console.log(this.gender);
}
}
});
</script>
v-on的按键修饰符
详情可见
<!--
1.什么是按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等
2.按键修饰符分类
2.1系统预定义修饰符
2.2自定义修饰符
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <input type="text" @keyup.enter="myFn">-->
<input type="text" @keyup.f2="myFn">
</div>
<script>
Vue.config.keyCodes.f2 = 113;
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
myFn(){
alert("lnj");
}
}
});
</script>