1基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>hello,{{name}}</h1>
<!-- <button v-on:click="showInfo">点我</button>-->
<button @click="showInfo1">点我1(传参)</button>
<button @click="showInfo2($event,777)">点我2(不穿参)</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
name: "lichenhui"
},
methods: {
showInfo1(event) {
alert('666')
},
showInfo2(event,num) {
console.log(event,num)
alert(num)
}
}
})
</script>
</body>
</html>
2.键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
<!-- vue提供了常用的按键别名-->
<input type="text" placeholder="按下回车提示" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
name: "lichenhui"
},
methods:{
showInfo(e) {
// console.log(e.keyCode)
// if (e.keyCode !== 13) return
console.log(e.target.value)
}
}
})
</script>
</body>
</html>
3.事件修饰符
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">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background: aqua;
}
</style>
</head>
<body>
<div id="demo" class="test">
<h1>hello,{{name}}</h1>
<!-- 1.prevent：阻止默认事件（常用）-->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我</a>
<!-- 2.stop：阻止事件冒泡（常用）-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 3.once：事件只触发一次（常用）-->
<button @click.once="showInfo">点我提示信息3</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
name: "lichenhui"
},
methods:{
showInfo(){
alert('666')
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
