vue.js的学习1.4

vue.js的学习1.4

1.自定义指令:
属性:

Vue.directive(指令名称,function(参数){
    this.el -> 原生DOM元素
});

指令名称: v-red -> red
注意: 必须以 v-开头

 <div id="box">
        <span v-red>    //这里自定义指令的名称：v-red
            asdfasd
        </span>
    </div>

  Vue.directive('red',function(){
            this.el.style.background='red';   //函数名则要去掉V-
        });

键盘信息：
@keydown.up
@keydown.enter
@keydown.a/b/c….

自定义键盘信息:
Vue.directive(‘on’).keyCodes.ctrl=17; //无法识别Ctrl时我们采取自定义键盘信息

2.监听数据变化：

vm.$el/$mount/$options/....
vm.$watch(name,fnCb);  //浅度
vm.$watch(name,fnCb,{deep:true});  //深度监视 ---》当数据类型是json等一些深度数据。

栗子：当点击页面时数据a的值发生变化，并弹出消息：发生变化了…此时改变b的值。

<script>
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:111,
                    b:2
                }
            });

            vm.$watch('a',function(){
                alert('发生变化了');
                this.b=this.a+100;
            });

            document.onclick=function(){
                vm.a=1;
            };
        };
    </script>