脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue自定义键盘信息、监听数据变化

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

 更新时间：2019年03月16日 11:27:31   作者：白杨-M  
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • vuex实现简单的购物车功能

    vuex实现简单的购物车功能

    这篇文章主要为大家详细介绍了vuex实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue3.2 中新出的Expose用法一览

    Vue3.2 中新出的Expose用法一览

    这篇文章主要介绍了Vue3.2 中新出的 Expose 是做啥用的,新的expose方法是非常直观的，而且很容易在我们的组件中实现，本文给大家介绍的非常详细，需要的朋友可以参考下
    2022-07-07
  • vue实际运用之vuex持久化详解

    vue实际运用之vuex持久化详解

    这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Vue Element plus使用方法梳理

    Vue Element plus使用方法梳理

    Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型
    2022-12-12
  • vue判断input输入内容全是空格的方法

    vue判断input输入内容全是空格的方法

    下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    这篇文章主要给大家介绍了关于利用vue+elementUI实现多文件上传与预览功能的相关资料,包括word/PDF/图片/docx/doc/xlxs/txt等格式文件上传,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue3.0 axios跨域请求代理服务器配置方式

    Vue3.0 axios跨域请求代理服务器配置方式

    这篇文章主要介绍了Vue3.0 axios跨域请求代理服务器配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 使用vue制作探探滑动堆叠组件的实例代码

    使用vue制作探探滑动堆叠组件的实例代码

    探探的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件，感兴趣的朋友一起看看吧
    2018-03-03
  • Vue 运行高德地图官方样例,设置class无效的解决

    Vue 运行高德地图官方样例,设置class无效的解决

    这篇文章主要介绍了Vue 运行高德地图官方样例,设置class无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue 一键清空表单的实现方法

    Vue 一键清空表单的实现方法

    这篇文章主要介绍了Vue 一键清空表单的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论