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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
围观tangram js库
Dec 28 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
vue实现列表的添加点击
Dec 29 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 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
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python3解释器知识点总结
2019/02/19 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python打包多类型文件的操作方法
2020/09/21 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
安全环保标语
2014/06/09 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
利用python做数据拟合详情
2021/11/17 Python