1. 事件处理
事件的基本使用：
1.使用v-on:xxx 或者@xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不要用箭头函数，否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5.@click="demo" 和 @click="demo($event)"效果一样，但是后者可以传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到 {{name}}</h2>
<button v-on:click="showInfo1">点击提示信息1</button>
<button @click="showInfo1">点击提示信息2</button>
<button @click="showInfo2($event, 66)">点击提示信息3</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data:{
name: '上海',
},
methods:{
showInfo1(){
alert("上海欢迎你")
},
showInfo2(event, number){
console.log(event, number)
}
}
})
</script>
</body>
</html>
2. 事件的修饰符
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才触发事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 15px;
}
.demo1{
height: 40px;
background-color: aquamarine;
}
.box1{
padding: 5px;
background-color: cyan;
}
.box2{
padding: 5px;
background-color:deeppink;
}
</style>
</head>
<body>
<div id="root">
<h2>欢迎来到 {{name}}</h2>
<a href="http://www.baidu.com" @click.prevent="goBaiDu()">点击跳转到百度</a>
<div class="demo1" @click="goBaiDu">
<button @click.stop="goBaiDu">点击跳转到百度</button>
</div>
<button @click.once="goBaiDu">点击跳转到百度</button>
<div class="box1" @click.capture="showMsg(1)">
div1
<div2 class="box2" @click="showMsg(2)">
div2
</div2>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data:{
name: '上海',
},
methods:{
goBaiDu(){
alert("上海欢迎您！")
},
showMsg(msg){
alert(msg)
}
}
})
</script>
</body>
</html>
|