Vue学习总结-指令

指令-自定义全局指令让文本框获取焦点

<label>
          搜索关键字:
<!--          注意：vue中所有指令，在调用时，都可以v-开头-->
          <input type="text" class="form-control" v-model="keywords" id="search"v-focus>
        </label>

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

  }
})

//自定义一个设置字体颜色的指令
Vue.directive('color',{
  //样式只要通过指令绑定给了元素，不管元素是否插入到页面去，这个元素肯定有了一个内联样式
  //将来元素肯定会显示到页面去，这时候，浏览器的渲染引擎必然会解析样式，应用给元素
  bind:function (el) {
      el.style.color = 'red'
  //  和样式相关的操作在此bind
  }
})

指令-使用钩子函数的第二个binding参数拿到传递的值

全局指令

        <label>
          搜索关键字:
<!--          注意：vue中所有指令，在调用时，都可以v-开头-->
          <input type="text" class="form-control" v-model="keywords" id="search"v-focus v-color>
        </label>
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式只要通过指令绑定给了元素，不管元素是否插入到页面去，这个元素肯定有了一个内联样式
//
  bind:function (el) {
      el.style.color = 'red'
  }
})

          <input type="text" class="form-control" v-model="keywords" id="search"v-focus v-color="'blue'">
          //自定义一个设置字体颜色的指令
Vue.directive('color',{
  //样式只要通过指令绑定给了元素，不管元素是否插入到页面去，这个元素肯定有了一个内联样式
  //将来元素肯定会显示到页面去，这时候，浏览器的渲染引擎必然会解析样式，应用给元素
  bind:function (el,binding) {
      
    console.log(binding.name)
    console.log(binding.value)
    console.log(binding.expression)
    el.style.color = binding.value
  //  和样式相关的操作在此bind
  }
})

定义私有指令

   <label>
          Id:
          <input type="text" class="form-control" v-model="id" v-fontweight ="900">
        </label>
directives:{
            'fontweight':{
                bind:function (el,binding) {
                    el.style.fontWeight = binding.value

                }
            }
        }

简写指令

directives:{
            //等同于把代码写到了bind和update中去
            'fontsize':function (el,binding) {
                el.style.fontsize = parseInt(binding.value) +'px';

            }
        }