vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

2020-11-27 来源：爱go旅游网

本文实例讲述了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自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】