vue教程2-08 自定义键盘信息

@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/$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教程2-08 自定义键盘信息、监听数据变化vm.$watch的更多相关文章

  1. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  2. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

  3. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  4. $watch监听数据变化和run方法

    angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...

  5. mvc 缓存 sqlCacheDependency 监听数据变化

    mvc 缓存   对于MVC有Control缓存和Action缓存. 一.Control缓存 Control缓存即是把缓存应用到整个Control上,该Control下的所有Action都会被缓存起来 ...

  6. Vue中使用watch来监听数据变化

    写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...

  7. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  8. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  9. vue17 $watch 监听数据变化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. vue中moudles的作用及使用方法

    1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个 ...

  2. UVa 1610 Party Games（思维）

    题意: 给出一系列字符串,构造出一个最短字符串(可以不在集合中)大于等于其中的一半,小于另一半. 析:首先找出中间的两个字符串,然后暴力找出最短的字符串,满足题意. 代码如下: #include &l ...

  3. jdk1.6的配置

    执行下列命令安装jdk1.7 /usr/lib/jvm$ sudo apt-get install openjdk-7-jdk openjdk-7-jre 会得到下面这两个文件: 查看当前jdk版本: ...

  4. javase jdk 环境变量 涵义

    jdk环境变量配置:path:jdk安装所在目录下的bin路径-->因为环境变量path下放置的是操作系统执行的.exe文件,jdk中bin中放的是可执行的.exe文件,所以要把这个路径放置到p ...

  5. Bagging和Boosting的区别

    转:http://www.cnblogs.com/liuwu265/p/4690486.html Bagging和Boosting都是将已有的分类或回归算法通过一定方式组合起来,形成一个性能更加强大的 ...

  6. 后台开发 - DPDK引发的图谱

    关系图谱(点击看完整大图): 部分名词: 名词 全写 解释 备注 DPDK Data Plane Development Kit 数据平面开发套件或叫数据平面开发工具集 Intel开源的快速数据包处理 ...

  7. redis状态监控可视化工具RedisLive使用

    首先,别人写的工具,赞一下  github地址 https://github.com/nkrode/RedisLive 然后,fork一下,自己加点功能 gui介绍(直接copy的github图片) ...

  8. Android多线程操作sqlite（Sqlite解决database locked问题）（2）使用事务处理的效果

    问题场景描述: 在页面中用到了ViewPager控件,ViewPager中的内容分别是两个ListView,两个ListView的数据都来自本地数据库(先从网络下载数据,然后更新本地数据库),在实际的 ...

  9. limit

    在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,mysql已经为我们提供了这样一个功能. SELECT * FROM table  LIMIT [offset ...

  10. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...