vue 第五天 （事件监听基础）
一般事件监听写的是 v-on：简化@
1、单击事件 v-on:click 简化 @click
<!--单击+1事件-->
<div id="vue_one">
<h2>{
{
result}}</h2>
<button @click="increment">+1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
result : 0
},
methods: {
increment(){
this.result++
}
}
})
</script>
2、v-on 传参问题
如果传了多个参数的话没有event 我们需要将event加上个美元符号 $event
<!--单击+1-->
<div id="vue_one">
<h2>{
{
result}}</h2>
<button @click="increment('qwe',$event)">+2</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
result : 0
},
methods: {
increment(ev,event){
console.log(ev+"/"+event)
this.result++
}
}
})
</script>
3、常用修饰符问题
3.1、阻止冒泡 （.stop）
当嵌套多个div 里面有很多个点击事件的话点击一个div会调用多个数据
正常出现冒泡代码
<!--单击按钮会出现两个点击事件-->
<div id="vue_one">
<div @click="div1">
<button @click="button1">点我</button>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
result: 0
},
methods: {
div1(){
console.log("div1");
},
button1(){
console.log("button1");
}
}
})
</script>
添加 .stop防止出现冒泡
<body>
<!--添加冒泡.stop 已经不会出现其他点击事件-->
<div id="vue_one">
<div @click="div1">
<button @click.stop="button1">点我</button>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
result: 0
},
methods: {
div1(){
console.log("div1");
},
button1(){
console.log("button1");
}
}
})
</script>
3.2、阻止默认方法的执行（.prevent）
比如form表单，默认的就是会自动的进行跳转
<!--显示跳转到form表单-->
<div id="vue_one">
<form>
<input type="submit" value="提交" @click="button1">
</form>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
result: 0
},
methods: {
button1(){
console.log("button1");
}
}
})
</script>
添加属性 .prevent防止默认的方法
<!--.prevent阻止跳转了-->
<div id="vue_one">
<form>
<input type="submit" value="提交" @click.prevent="button1">
</form>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
methods: {
button1(){
console.log("button1");
}
}
})
</script>
3.3、只执行一次（.once）
<!--只点击一次有效果，多次就无效果-->
<div id="vue_one">
<button @click.once="button1">点我</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
methods: {
button1(){
console.log("button1");
}
}
})
</script>
3.4、某个键盘敲击事件的监听修饰符(@keyup.键盘按钮名称) 松开按键进行监听
<!--监听某一个键盘的按键，松手监听-->
<div id="vue_one">
<input type="text" @keyup.esc="keyUp">
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
methods: {
keyUp(){
console.log("button1");
}
}
})
</script>
3.5、修饰符可以串联
<!--修饰符可以串联-->
<div id="vue_one">
<div @click="div1">
<a href="www.baidu.com" @click.stop.prevent="doThat">12345</a>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
methods: {
div1(){
console.log("div1");
},
doThat(){
console.log("a");
}
}
})
</script>
3.6、只能通过鼠标左右键调用函数 .left .right
<body>
<!--.left只能点击鼠标左键调用函数，.right只能点击鼠标右键调用函数-->
<div id="vue_one">
<button @click.right="right">点我</button>
<button @click.left="left">点我</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
methods: {
right(){
console.log("right");
},
left(){
console.log("left");
}
}
})
</script>
花开一千年,花落一千年,花叶永不见