VUE自定义指令 computed和ref属性的使用

ref属性

**ref属性表示对dom的引用，它的值可以随便取，但不能重复 写在标签属性的位置 **
如：<input type="text" v-model="newId" id="inputId" ref="inputRefId">

获取ref属性对dom的值

通过：在mounted 钩子函数中使用 this.$refs.ref的值 来获取dom
mounted 钩子函数很特殊，它表示页面一加载进来就执行函数里面的内容（和window.onload类似）
注意：mounted 钩子函数的名字就不能随便取，而且***不能***写在methods属性。
代码如：

自定义指令通过Vue.directive()创建

自定义指令通过Vue.directive()创建，它包含两个参数，一个是自定义指令的名字，可以随便取，但是全部小写；另一个是一个对象，表示自定义指令的配置项。

创建的是v-myfocus指令

代码如下：

 Vue.directive('myfocus', {
    // inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
    // inserted钩子函数有两个参数（el,binding） el表示使用自定义指令的元素，binding表示自定义指令的信息
    inserted(el, binding) {
      console.log(el);
      console.log(binding);
      el.focus()
    }
  })

创建自定义指令中的属性的值

  // 创建v-mycolor自定义指令
  Vue.directive('mycolor', {
    inserted(el, binding) {
      console.log(binding);
      // binding.value可以获取传入自定义指令中的属性的值
      el.style.color = binding.value
    }
  })