vue基础（自定义局部指令与自定义全局指令）

知道什么是ref,它有什么用

1. ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用
2. ref 被用来给元素或子组件注册引用信息，说白了，就相当于为元素设置一个标识
3. 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
4. ref像元素的唯一标识，所以不要让其值重复
5. 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象

通过$refs获取dom元素

自定义局部指令

除了官方的指令，vue还允许开发者自定义指令
局部自定义指令：组件内定义的指令，只有在当前组件中可以使用

创建局部自定义指令

1. 定义位置
   • 局部自定义指令需要在组件的directives结构中定义，它是一个单独的结构
2. 语法
   关于钩子函数的参数
   el:指令所绑定的元素，可以用来直接操作 DOM
   binding:一个对象，包含多个属性，特别是里面的value，通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binding.value可以获取

directives:{
    指令名称：{
      // inderted:钩子函数，当指令添加到元素中时触发，
      // 当解析元素的时候，就会自动的触发
        inserted(el,binding){       
         }
     }
}

• 指令的使用
  • 和之前的内置指令一样，使用v-指令名称来使用我们自定义的指令
  • 在使用指令的时候，可以为指令绑定动态参数

// 添加局部自定义指令
  directives: {
    myfocus: {
      // el就是当前绑定这个指令的元素，可以用来直接操作dom
      inserted (el) {
        el.focus()
      }
    },
    mycolor: {
      inserted (el, binding) {
        el.style.color = binding.value
      }
    }
  }

自定义全局指令

• 说明：
  • 使用Vue.directive创建全局自定义指令
  • 在每个组件中都能引入使用
• 语法：

// 全局指令
Vue.directive(指令名称,{
    // 配置及处理
    inserted(el,binding){
        
    }
})

自定义全局指令创建与使用步骤：

1.创建utils文件夹并创建mydirectives.js文件用来存放自定义全局指令

2. 在mydirectives.js中引入Vue

// 这个存放项目中所需要使用的通用指令
// 2.引入Vue
import Vue from 'vue';

3. 创建一个全局指令：设置颜色

// 3.创建一个全局指令：设置颜色
// Vue.directive('指令名称',{inserted(el,binding){}})
Vue.directive('mycolor', {
  inserted(el, binding) {
    el.style.color = binding.value
  }
})

4. 在单文件组件中引入全局指令

// 引入其它模块,全局指令是挂载到全局，所以不用接收
import '../../utils/mydirectives.js'

5. v-指令名称使用这个全局指令