阿菜的Vue学习之旅(七)
1.在v-on中使用.stop修饰符
当我们想要获取用户在界面上的点击互动之时,可以通过监听用户的点击事件来实现,那么v-on的作用就是绑定事件监听器。
v-on: 也可以使用 @ 来表示
css部分
.myMenu1{
border: 5px solid skyblue;
background-color: #84bbf3;
}
html部分
<div class="myMenu">
<!--停止冒泡: .stop修饰符-->
<div class="myMenu1" @click="divClick">
<p>点击此文字</p><br/>
<button @click="btnClick">按钮</button>
</div>
js部分
const myMenu1 = new Vue({
el: '.myMenu1',
methods: {
btnClick: function (){
//当用户点击了按钮时,控制台便会打印下面的语句
console.log("这是点击了按钮");
},
divClick: function () {
//当用户点击了myMenu1的整个区域时(为了方便看,该区域填充了天蓝色),控制台便会打印下面的语句
console.log("这是点击了div板块");
}
}
})
运行效果:
当我们点击蓝色区域的时候(即myMenu1的div板块),调用了4次divClick方法,控制台打印了4次的对应语句
当我们点击按钮的时候,调用了2次btnClick方法和divClick方法,控制台分别打印了2次的对应语句。
但是我们并不想要在用户在点击按钮的时候,也触发divClick方法,咋办?
那么可以在< button >部分将 @click 改成 @click.stop
.stop ----调用event.stopPropagation()
修改后的html部分
<div class="myMenu">
<!--停止冒泡: .stop修饰符-->
<div class="myMenu1" @click="divClick">
<p>点击此文字</p><br/>
<button @click.stop ="btnClick">按钮</button>
</div>
</div>
再次运行结果:
2.在v-on中使用.prevent修饰符
当我们在表格当中设定一个submit的提交按钮的时候,当用户点击该按钮,便会自动跳转到action指定的页面。
.prevent ----调用event.preventDefault()
html部分
<div class="myMenu">
<!--阻止默认行为: .prevent修饰符-->
<form action="blank.html">
<input type="submit" value="提交" @click="submitClick">
</form>
</div>
js部分
const myMenu = new Vue({
el: '.myMenu',
methods: {
submitClick: function (){
console.log("用户提交了表格");
}
}
})
运行效果:
如果我们不想要该按钮的默认跳转呢?
可以使用.prevent修饰符,即在@click后面添加一个.prevent
修改后的html部分
<div class="myMenu">
<!--阻止默认行为: .prevent修饰符-->
<form action="blank.html">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
运行效果
3.在v-on中使用键修饰符
当我们想要监听用户到底按了多少次键盘的键帽时,可以使用@keyup修饰符。
.{ keyCode | keyAlias } ----当事件从特定键触发时才会触发回调
html部分
<div class="myMenu">
<!--阻止默认行为且没有表达式: submit.prevent修饰符-->
<!--键修饰符 键别名 (监听某个键盘的键帽-->
<input type="text" @keyup="keyupClick">
</div>
js部分
const myMenu = new Vue({
el: '.myMenu',
methods: {
keyupClick: function (){
console.log("用户按了一次某个键盘的键帽");
}
}
})
运行结果:
用户输入hello的时候,一共按了5次键盘
如果我们想要获取的是用户按enter键盘的次数呢?
可以在@keyup的后面添加.enter或者.13
修改后的html部分
<div class="myMenu">
<!--阻止默认行为且没有表达式: submit.prevent修饰符-->
<!--键修饰符 键别名 (监听某个键盘的键帽-->
<!--制定监听的特定条件是:点击了enter-->
<input type="text" @keyup.enter="keyupClick">
<!--法二: 13是enter键盘的ACSII码-->
<!-- <input type="text" @keyup.13="keyupClick">-->
</div>
运行结果:
—————————————————————————— —
上一篇
阿菜的Vue学习之旅(六)
上一篇
阿菜的Vue学习之旅(八)