vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

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>

 

posted on 2017-04-27 16:31  白杨-M  阅读(345)  评论(0)  编辑  收藏  举报

导航