知道什么是ref,它有什么用
- ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用
- ref 被用来给元素或子组件注册引用信息，说白了，就相当于为元素设置一个标识
- 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
- ref像元素的唯一标识，所以不要让其值重复
- 每个 vue 的组件实例上，都包含一个
$refs对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的$refs指向一个空对象
通过$refs获取dom元素
<template>
<div>
<!-- ref相当于元素的id号，不能重复 -->
<p ref="myp">p</p>
<span ref="myspan">span</span>
<button @click="getDom">获取 $refs 引用</button>
</div>
</template>
<script>
export default {
methods: {
getDom() {
// 可以获取所有设置里ref表示的元素，
// 返回一个包含这些元素的对象
console.log(this.$refs);
// 操作DOM元素，把文本颜色改为红色 与 蓝色
this.$refs.myp.style.color = "red";
this.$refs.myspan.style.color = "blue";
},
},
};
</script>
自定义局部指令
除了官方的指令，vue还允许开发者自定义指令
局部自定义指令：组件内定义的指令，只有在当前组件中可以使用
创建局部自定义指令
- 定义位置
- 局部自定义指令需要在组件的directives结构中定义，它是一个单独的结构
- 语法
关于钩子函数的参数
el:指令所绑定的元素，可以用来直接操作 DOM
binding:一个对象，包含多个属性，特别是里面的value，通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binding.value可以获取
directives:{
指令名称：{
// inderted:钩子函数，当指令添加到元素中时触发，
// 当解析元素的时候，就会自动的触发
inserted(el,binding){
}
}
}
- 指令的使用
- 和之前的内置指令一样，使用v-指令名称来使用我们自定义的指令
- 在使用指令的时候，可以为指令绑定动态参数
<input type="text"
v-myfocus
v-mycolor='"red"'>
// 添加局部自定义指令
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文件用来存放自定义全局指令
- 在mydirectives.js中引入Vue
// 这个存放项目中所需要使用的通用指令
// 2.引入Vue
import Vue from 'vue';
- 创建一个全局指令：设置颜色
// 3.创建一个全局指令：设置颜色
// Vue.directive('指令名称',{inserted(el,binding){}})
Vue.directive('mycolor', {
inserted(el, binding) {
el.style.color = binding.value
}
})
- 在单文件组件中引入全局指令
// 引入其它模块,全局指令是挂载到全局，所以不用接收
import '../../utils/mydirectives.js'
-
v-指令名称使用这个全局指令
