Vue中的事件修饰符
1.Prevent:阻止默认事件(常用)
@click.prevent阻止事件默认行为
<a href="http://www.baidu.com" @click.prevent=""showInfo>点击提示信息</a>
2.stop:阻止事件冒泡
.stop 阻止事件冒泡
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
修饰符可以连续写
<a href="http://www.baidu.com" @click.prevent.stop=""showInfo>点击提示信息</a>
</div>
3.once:事件只触发一次
.once:事件只触发一次
<button @click.once="showInfo">点我提示信息1111</button>
4.capture:使用事件的捕获模式
.capture:使用事件的捕获模式
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
5.self:只有event.target是当前操作的元素是才触发事件
.self:只有event.target是当前操作的元素是才触发事件
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
6.passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕
.passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕
scroll 滚动条 wheel滚动轮的滚动 @wheel.passive
<ul class="list" @scroll="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
键盘事件
1.Vue中常用的案件别名
回车 => enter
删除=> delect (捕获“删除”和“退格”)
退出=>esc
空格=>space
换行=>tab 将焦点从当前元素移走 必须配合 keydown使用
上=>up
下=>down
左=>left
右=>right
tab键将焦点从当前元素移走
@keyup.enter 不用写方法 用.enter 按下回车的时候会自动调用 不会输入一点调用一次
@keyup.ctrl.y 同时点击 ctrl + y 才会调用
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
2.Vue未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转化为kebab-case(短横线命名)
3.系统修饰键 ctrl alt shift meta
(1).配合keyup使用 按下修饰键的同时 再按下其他键 随后释放其他键 事件才被触发
(2).配合keydown使用正常触发事件
4.也可以使用 keyCode去指定具体的按键(不推荐)
@keyup.13 = @keyup.Enter
5.Vue.confing.keyCodes.自定义键名 = 键码 可以去定制按键名
Vue.config.keyCodes.huice = 13 //定义了一个别名按键
监视属性watch
1.当监视的属性变化时 回调函数自动调用 进行相关操作
watch:{
isHot:{
immediate:true, // 初始化时让handler调用一下
handler(newValue,oldValue){ //handler什么时候被调用 当isHot值发生改变时
console.log("isHot被修改了",newValue,oldValue);
},
}
}
2.监视属性的属性必须存在 才能进行监视
3.监视的两种写法
(1)new Vue时传入watch配置
(2)通过vm.$watch监视
const vm = new Vue({
el:"#root",
data:{
isHot:true,
x:1,
},
computed:{
info(){
return this.isHot ? '炎热' :'凉爽'
}
},
vm.$watch('isHot',{
immediate:true ,// 初始化时让handler调用一下
handler(newValue,oldValue){ //handler什么时候被调用 当isHot值发生改变时
console.log("isHot被修改了",newValue,oldValue);
},
})
深度监视
(1).Vue中的watch默认不检测对象内部值的改变(一层)
'numbers.a':{ //监视多级结构中某个属性的变化
handler(newValue,oldValue){
console.log("a改变了");
}
},
(2)配置deep:true可以检测对象内部值改变(多层)
'numbers':{ //监视多级结构中所有属性的变化
deep:true, //深度监视
handler(newValue,oldValue){
console.log("numbers改变了");
}
}
备注:
(1)Vue自身可以检测对象内部值的改变但Vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构 决定是否采用深度监视
简写
watch: { //正常写法
isHot:{
immediate:true ,// 初始化时让handler调用一下
handler什么时候被调用 当isHot值发生改变时
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue);
},
},
isHot(newValue, oldValue) { //简写
console.log("isHot被修改了", newValue, oldValue);
}
vm.$watch('isHot',{
immediate:true ,// 初始化时让handler调用一下
handler什么时候被调用 当isHot值发生改变时
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue);
},
})
简写
vm.$watch('isHot',function(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue);
})
