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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
ext jquery 简单比较
Apr 07 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
javascript实现微信分享
Dec 23 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
nodejs基础知识
2017/02/03 NodeJs
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Python中的闭包总结
2014/09/18 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
使用tensorflow实现线性svm
2018/09/07 Python
python支付宝支付示例详解
2019/08/22 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python中判断文件结束符的具体方法
2020/08/04 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
园长自我鉴定
2013/10/06 职场文书
爱心捐助倡议书
2014/05/19 职场文书
调任通知
2015/04/21 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android