vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
更新时间：2019年03月16日 11:27:31 作者：白杨-M
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下：
@keydown.up
@keydown.enter
@keydown.a/b/c....
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
@keydown.a/b/c....
<input type="text" @keydown.c="show">
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script>
Vue.directive('on').keyCodes.ctrl=17; //
Vue.directive('on').keyCodes.myenter=13;
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown.myenter="show | debounce 2000">
</div>
</body>
</html>
监听数据变化:
vm.el/el/mount/$options/....
vm.$watch(name,fnCb); //浅度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
json:{name:'strive',age:16},
b:2
}
});
vm.$watch('json',function(){
alert('发生变化了');//浅监听，json里面某个属性变，是不会监听到的
});
document.onclick=function(){
vm.json.name='aaa';
};
};
</script>
</head>
<body>
<div id="box">
{{json | json}}//json过滤相当于 JSON.string
<br>
{{b}}
</div>
</body>
</html>
vm.$watch(name,fnCb,{deep:true}); //深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
json:{name:'strive',age:16},
b:2
}
});
vm.$watch('json',function(){
alert('发生变化了');
},{deep:true});
document.onclick=function(){
vm.json.name='aaa';
};
};
</script>
</head>
<body>
<div id="box">
{{json | json}}
<br>
{{b}}
</div>
</body>
</html>
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue Antd table组件实现服务端排序方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)
本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要为大家介绍了vue中filter的应用场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
这篇文章主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助2023-12-12
vue项目如何从session中获取对象,并且使用里面的属性
这篇文章主要介绍了vue项目如何从session中获取对象,并且使用里面的属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了在vue3中使用jsx语法,下面主要通过对比jsx和template不同语法，来实现同样的功能，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在vue中使用Autoprefixed的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue自动化注册全局组件脚本，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论