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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
为原生js Array增加each方法
Apr 07 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
使用js实现数据格式化
Dec 03 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue中的使用token的方法示例
Mar 10 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
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
javascript事件问题
2009/09/05 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python远程登录代码
2008/04/29 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
使用tensorflow实现线性svm
2018/09/07 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
诉讼和解协议书
2016/03/23 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS