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 自动增长的文本输入框实现代码
Apr 02 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php导出CSV抽象类实例
2014/09/24 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python中的多重继承实例讲解
2014/09/28 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
经典安踏广告词
2014/03/21 职场文书
中秋晚会策划方案
2014/06/12 职场文书
代收款委托书范本
2014/10/01 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript