第六十一篇:Vue的绑定事件和修饰符
好家伙,补基础加实践
1.绑定事件
我们使用v-on(简写为@)来绑定事件
写个例子,
按钮绑定数字加一(太tm经典了)
在<button>元素中使用@点击事件绑定方法"的"add"(方法可传参)
<div id="app">
差值语法{{count}}
<div>count的值为:{{count}}</div>
<button @click="add(1)">是兄弟就来点我,点我加一</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
count:1,
},
methods:{
add(n){
this.count =this.count + n,
console.log(n)
}
}
})
</script>
2.默认事件
现在假设我们要实现一个按钮变色的功能
2.1.找DOM元素
我们先让控制台去打印一个默认事件,
将add处的参数改掉,然后"console.log(e)"会将"e"作为默认事件打印出来
<div id="app">
差值语法{{count}}
<div>count的值为:{{count}}</div>
<button @click="add">是兄弟就来点我,点我加一</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
count:1,
},
methods:{
add(e){
this.count =this.count + 1,
console.log(e)
}
}
})
</script>
随后在这个事件中找到他的DOM元素
然后对代码稍作更改
<div id="app"> 差值语法{{count}} <div>count的值为:{{count}}</div> <button @click="add">是兄弟就来点我,点我加一</button> </div> <script> const vm = new Vue({ el:'#app', data:{ count:1, }, methods:{ add(n){ this.count =this.count + 1, console.log(n) if(this.count%2===0){ n.target.style.backgroundColor ='red' }else{ n.target.style.backgroundColor ='' } } } }) </script>
搞定,
2.2.$event
如果"add"方法中我们需要传参,那么就无法直接使用"console.log(e)"直接打印默认事件了
但是我们有$event
vue提供了内置变量,名字叫做$event,他就是原生DOM的事件对象e
使用方法:
<button @click="add(n,$event)">是兄弟就来点我,点我加一</button> add(n,e){ this.count =this.count + n, console.log(n)
}
3.事件修饰符
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求
。因此,vue 提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:
修饰符 说明
.prevent 阻止默认行为(例如:阻止a连接的跳转、阻止表单的提交等)
.stop 阻止事件冒泡.
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发1次
.self 只有在event.target是当前元素自身时触发事件处理函数
其中.prevent最常用
举个例子(实现阻止页面跳转)
<a href="http://www.baidu.com" @click.prevent="show">百度一下</a>
点击也无法进行跳转了