绑定事件
@是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法
1.调用方法时，不传参数，默认会将事件对象作为参数传递
<div id="app">
<button @click="sayHi">sayHi</button>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
sayHi(e){
console.log(e);
alert('Hi！')
}
})
</script>
2.调用方法时，如果有参数传递，传的是什么参数，接的就是什么参数
<div id="app">
<button @click="sayHello('hello')">sayHello</button>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
sayHello(e){
console.log(e);
alert('Hello！')
}
})
</script>
3.调用方法时，传递一个$event参数，该参数就是事件对象
<div id="app">
<button @click="sayNice('Nice',$event)">sayNice</button>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
sayNice(msg,e){
console.log(e);
alert(msg)
}
})
</script>
- 当前事件处理的代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据
<div id="app">
<button @click="age++">年龄++</button>
</div>
事件修饰符
1..prevent，用于阻止默认行为
<div id="app">
//contextmenu右键弹出菜单
<div class="box" @contextmenu.prevent="showbox">
box
</div>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
showbox(e){
//阻止默认行为
// e.preventDefault()
console.log('你好！我是box');
}
})
</script>
2..once，用只绑定一次事件方法
.stop，用于阻止事件冒泡
<div id="app">
//contextmenu右键弹出菜单
<div class="one" @click.once="one">
<div class="two" @click.stop="two"></div>
</div>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
one(){
console.log('你好！我是one');
},
two(e){
// 阻止事件冒泡
// e.stopPropagation();
console.log('你好！我是two');
}
})
</script>
3..self，只能在自身元素上触发，不会在子元素上触发
<div id="app">
<div class="box2" @click.self="showbox2">
<div class="box3"></div>
</div>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
showbox2(){
console.log('你好！我是box2');
}
})
</script>
键盘事件
1.每次键盘弹起都会调用事件方法
<div id="app">
<div>
<!-- 每次键盘弹起都会调用事件方法 -->
请输入搜索关键字：<input type="text" @keyup="keyup">
</div>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
keyup(e){
let {keyCode} = e
if(keyCode===13){
alert('搜索指定的商品')
}
}
})
</script>
2.只在回车时，才会调用事件方法
<div>
<!-- 只在回车时，才会调用事件方法 -->
请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
},
methods: {
keyup1(){
alert('搜索指定的商品')
}
})
</script>
