Vue-动画

   //1.自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113;
    //  名称 = 键盘码; 

    //2.使用 Vue.directive() 定义全局的指令
    //其中  参数1 是指令的名称，注意在定义的时候，指令的名称前面不需要加 v-  前缀 
    //但是调用时必须加v-前缀调用非
    //参数2  是一个对象  这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作
    Vue.directive('focus', {
      bind: function (el) {//每当指令被绑定到元素上的时候，会立即执行这个bind函数  只执行一次
        //注意：在每个函数中，第一个参数永远是 el 表示被绑定了指令的那个元素，这个el参数是一个原生的js对象
        //在元素刚绑定指令的时候还有没有插入到DOM中去  这个时候调用 focus没有作用
        //因为一个元素只有插入到Dom之后，才能获取焦点
        // el.focus();
      },
      inserted: function (el) {//表示元素插入到DOM中的时候，会执行inserted函数
        el.focus();
        //和js行为有关的操作  最好在inserted 去执行
      },
      updated: function () {//当VNode更新的时候  会执行updated，可能会发生多次

      }
    })

    //自定义一个设置字体颜色的指令
    Vue.directive('color',{
       //样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去  这个元素肯定有这样一个内联样式
       //将来页面肯定会显示到页面中去，这时候 浏览器肯定会解析 样式  应用给这个元素
      bind:function(el,binding){
         el.style.color = binding.value;
         //和样式相关的操作 一般都可以在 bind 中执行
      }
    })