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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
JS的get和set使用示例
Feb 20 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
layui实现三级导航菜单
Jul 26 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数据库开发知多少
2006/10/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
Yii2如何批量添加数据
2016/05/17 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python实现数组插入新元素的方法
2015/05/22 Python
python @property的用法及含义全面解析
2018/02/01 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
年度考核评语
2014/01/19 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
五年级上册复习计划
2015/01/19 职场文书
孔庙导游词
2015/02/04 职场文书
故意伤害辩护词
2015/05/21 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang