vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

 更新时间:2019-04-17 21:43:09   作者:佚名   我要评论(0)

本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考,具体如下:
@keydown.up

@keydown.enter

@keydown.a/b/c....
自定义键盘信

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
  • vue监听键盘事件的快捷方法【推荐】
  • vue点击input弹出带搜索键盘并监听该元素的方法
  • Vue.js每天必学之计算属性computed与$watch
  • vue.js中$watch的用法示例
  • 详解vue2 $watch要注意的问题
  • Vue.js 中的 $watch使用方法
  • 深入理解vue.js中$watch的oldvalue与newValue
  • 深入对Vue.js $watch方法的理解
  • Vue.Js中的$watch()方法总结

相关文章

  • vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信
    2019-04-17
  • PHP implode()函数用法讲解

    PHP implode()函数用法讲解

    PHP implode() 函数 实例 把数组元素组合为一个字符串: <&#63;php $arr = array('Hello','World!','Beautiful','Day!'); echo implode(" ",$arr); &#63
    2019-04-17
  • Properties 持久的属性集的实例详解

    Properties 持久的属性集的实例详解

    Properties 持久的属性集的实例详解 特点: 1、Hashtable的子类,map集合中的方法都可以用。 2、该集合没有泛型。键值都是字符串。 3、它是一个可以
    2019-04-17
  • Java 使用正则表达式对象实现正则的获取功能

    Java 使用正则表达式对象实现正则的获取功能

    获取需要使用到正则的两个对象: 使用的是用正则对象Pattern 和匹配器Matcher。 用法: 范例: Pattern p = Pattern.compile("a*b"); Matcher m =
    2019-04-17
  • .Net Core自定义配置源从配置中心读取配置的方法

    .Net Core自定义配置源从配置中心读取配置的方法

    前言 配置,几乎所有的应用程序都离不开它。.Net Framework时代我们使用App.config、Web.config,到了.Net Core的时代我们使用appsettings.json,这些我们再熟
    2019-04-17
  • .NET实现工资管理系统

    .NET实现工资管理系统

    本文实例为大家分享了.NET实现工资管理系统的具体代码,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.Linq
    2019-04-17
  • 浅谈SpringMVC jsp前台获取参数的方式 EL表达式

    浅谈SpringMVC jsp前台获取参数的方式 EL表达式

    JAVA: request.setAttribute("msg", "1234"); session.setAttribute("msg2", "1234"); JSP: ${requestScope.msg} ${sessionScope.msg2} JAVA: Mo
    2019-04-17
  • 浅谈PHPANALYSIS提取关键字

    浅谈PHPANALYSIS提取关键字

    最近在开发一个文章模块功能,设计那边提出要给文章生成对应标签,用于文章关联推送,这里和大家分享一下实现过程; 这里需要用到PHPAnalysis,下载链接如下
    2019-04-17
  • 正则表达式语句中的注释方法分享

    正则表达式语句中的注释方法分享

    小括号的另一种用途是通过语法(&#63;#comment)来包含注释。 例如:2[0-4]\d(&#63;#200-249)|25[0-5](&#63;#250-255)|[01]&#63;\d\d&#63;(&#63;#0-199)。 要包
    2019-04-17
  • JSP页面跳转方法大全

    JSP页面跳转方法大全

    先来介绍一下在服务端JSP脚本中跳转页面的几种方法: 1. response.sendRedirct("跳转到页面"); 该方法通过修改HTTP协议的HEADER部分,对浏览器下达重定向指令的
    2019-04-17

最新评论

最近更新的内容

本类推荐