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


Posted in Javascript onMarch 16, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
js中new一个对象的过程
Feb 20 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
vue.js的安装方法
May 12 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JS中数据结构之栈
Jan 01 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
vue自定义指令用法经典实例小结
Mar 16 #Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 #Javascript
vue+php实现的微博留言功能示例
Mar 16 #Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 #Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php定界符
2014/06/19 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
React简单介绍
2017/05/24 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Django中url的反向查询的方法
2018/03/14 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python批量解压zip文件的方法
2019/08/20 Python
python机器学习实现决策树
2019/11/11 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
.net面试题
2016/09/17 面试题
2014年军人思想汇报范文
2014/10/12 职场文书
社区植树节活动总结
2015/02/06 职场文书
安全保证书怎么写
2015/02/28 职场文书
尼克胡哲观后感
2015/06/08 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书