vue教程2-08 自定义键盘信息监听数据变化vm.$watch
Posted 白杨-M
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue教程2-08 自定义键盘信息监听数据变化vm.$watch相关的知识，希望对你有一定的参考价值。
vue教程2-08 自定义键盘信息
@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/$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教程2-08 自定义键盘信息监听数据变化vm.$watch的主要内容，如果未能解决你的问题，请参考以下文章