本文详细介绍了Vue2中的ref和nextTick的用法，以及如何通过ref获取DOM元素和组件实例。同时，文章还阐述了nextTick解决的异步更新问题，确保在DOM更新后执行特定操作。此外，文章还探讨了自定义指令的创建和使用，包括如何封装DOM操作和响应指令值的变化。最后，通过v-loading指令的封装，展示了如何在实际开发中提高用户体验。
零、文章目录
Vue2基础七、ref&nextTick&自定义指令
1、ref
- **作用：**利用 ref 和 $refs 可以用于
获取 dom 元素, 或组件实例 - **特点：**查找范围 →
当前组件内 (更精确稳定)，用document.querySelect(‘.box’) 获取的是整个页面中的盒子
（1）获取 dom
- 目标标签 – 添加 ref 属性
<div ref="chartRef">我是渲染图表的容器</div>
- 恰当时机, 通过 this.$refs.xxx, 获取目标标签
mounted () {
console.log(this.$refs.chartRef)
},
（2）获取组件
- 目标组件 – 添加 ref 属性
<BaseForm ref="baseForm"></BaseForm>
- 恰当时机, 通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法
this.$refs.baseForm.组件方法()
（3）代码演示
- 安装
echart包
yarn add echarts
- 父组件
App.vue
<template>
<div class="app">
<div class="base-chart-box">
这是一个捣乱的盒子
</div>
<BaseChart></BaseChart>
</div>
</template>
<script>
import BaseChart from './components/BaseChart.vue'
export default {
components:{
BaseChart
}
}
</script>
<style>
.base-chart-box {
width: 300px;
height: 200px;
}
</style>
- 子组件
BaseChart.vue
<template>
<div class="base-chart-box" ref="baseChartBox">子组件</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
// 基于准备好的dom，初始化echarts实例
// document.querySelector 会查找项目中所有的元素
// $refs只会在当前组件查找盒子
// var myChart = echarts.init(document.querySelector('.base-chart-box'))
var myChart = echarts.init(this.$refs.baseChartBox)
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例',
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
})
},
}
</script>
<style scoped>
.base-chart-box {
width: 400px;
height: 300px;
border: 3px solid #000;
border-radius: 6px;
}
</style>
- 效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WmBy90dR-1690447474327)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307131641861.png)]
2、nextTick
（1）异步更新问题
-
需求：编辑标题, 编辑框自动聚焦
- 点击编辑，显示编辑框
- 让编辑框，立刻获取焦点
this.isShowEdit = true // 显示输入框 this.$refs.inp.focus() // 获取焦点 -
问题：“显示之后”，立刻获取焦点是不能成功的！
-
原因：
Vue 是 异步更新 DOM (提升性能)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BdzLqJY-1690447474329)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307131654743.png)]
（2）$nextTick解决问题
- $nextTick：
等 DOM 更新后, 才会触发执行此方法里的函数体 - 语法:
this.$nextTick(函数体)
this.$nextTick(() => {
this.$refs.inp.focus()
})
- 注意：
$nextTick内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例
（3）代码实现
<template>
<div class="app">
<div v-if="isShowEdit">
<input type="text" v-model="editValue" ref="inp" />
<button>确认</button>
</div>
<div v-else>
<span>{{ title }}</span>
<button @click="editFn">编辑</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '大标题',
isShowEdit: false,
editValue: '',
}
},
methods: {
editFn() {
// 显示输入框
this.isShowEdit = true
// // 获取焦点
// this.$refs.inp.focus()
this.$nextTick(() => {
this.$refs.inp.focus()
})
} },
}
</script>
3、自定义指令
（1）指令分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJamBXtu-1690447474330)(https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307141042338.png)]
（2）自定义指令
-
自定义指令：自己定义的指令, 可以
封装一些 dom 操作， 扩展额外功能 -
自定义指令语法：
- 全局注册
//在main.js中 // 1. 全局注册指令 Vue.directive('focus', { // inserted 会在 指令所在的元素，被插入到页面中时触发 inserted (el) { // el 就是指令所绑定的元素 // console.log(el); el.focus() } })- 局部注册
//在Vue组件的配置项中 directives: { "指令名": { inserted () { // 可以对 el 标签，扩展额外功能 el.focus() } } }-
使用指令
- 在使用指令的时候，一定要
先注册，再使用，否则会报错 - 使用指令语法：
v-指令名。如：<input type="text" v-focus/> 注册指令时不用加v-前缀，使用时要加v-前缀
<input v-focus type="text"> - 在使用指令的时候，一定要
-
指令中的配置项介绍
inserted：被绑定元素插入父节点时调用的钩子函数el：使用指令的那个DOM元素
-
完整代码实现：
- 需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）
<template>
<div>
<h1>自定义指令</h1>
<input v-focus type="text">
</div>
</template>
<script>
export default {
// 2. 局部注册指令
directives: {
// 指令名：指令的配置项
focus: {
inserted (el) {
el.focus()
}
}
}
}
</script>
<style>
</style>
（3）自定义指令的值
-
需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
-
语法：
v-指令名 = "指令值"，通过等号可以绑定指令的值
<div v-color="color">我是内容</div>- 通过
binding.value可以拿到指令值，通过update 钩子，可以监听指令值的变化，进行dom更新操作
directives: { color: { inserted (el, binding) { el.style.color = binding.value }, update (el, binding) { el.style.color = binding.value } } } -
完整代码实现：
<template>
<div>
<h1 v-color="color1">指令的值1测试</h1>
<h1 v-color="color2">指令的值2测试</h1>
</div>
</template>
<script>
export default {
data () {
return {
color1: 'red',
color2: 'orange'
}
},
directives: {
color: {
// 1. inserted 提供的是元素被添加到页面中时的逻辑
inserted (el, binding) {
// console.log(el, binding.value);
// binding.value 就是指令的值
el.style.color = binding.value
},
// 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
update (el, binding) {
console.log('指令的值修改了');
el.style.color = binding.value
}
}
}
}
</script>
<style>
</style>
（4）v-loading 指令封装
- 场景：实际开发过程中，发送
请求需要时间，在请求的数据未回来时，页面会处于空白状态=>用户体验不好 - 需求：封装一个 v-loading 指令，实现加载中的效果
-
分析：
- 本质 loading 效果就是一个蒙层，盖在了盒子上
- 数据请求中，开启loading状态，添加蒙层
- 数据请求完毕，关闭loading状态，移除蒙层
-
实现思路：
- 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层
- 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可
- 结合自定义指令的语法进行封装复用
-
代码实现：
<template>
<div class="main">
<div class="box" v-loading="isLoading">
<ul>
<li v-for="item in list" :key="item.id" class="news">
<div class="left">
<div class="title">{{ item.title }}</div>
<div class="info">
<span>{{ item.source }}</span>
<span>{{ item.time }}</span>
</div>
</div>
<div class="right">
<img src="./assets/img/news.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
isLoading: true
}
},
created () {
// 更新到 list 中，用于页面渲染 v-for
this.list = [
{
id:1,
title:'testtitle1',
source:'testsource1',
time:'testtime1'
},
{
id:2,
title:'testtitle2',
source:'testsource2',
time:'testtime2'
}]
//三秒后loading移除
setTimeout(()=>{
this.isLoading = false
}, 3000);
},
directives: {
loading: {
inserted (el, binding) {
binding.value ? el.classList.add('loading') : el.classList.remove('loading')
},
update (el, binding) {
binding.value ? el.classList.add('loading') : el.classList.remove('loading')
}
}
}
}
</script>
<style>
.loading:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff url('./assets/img/loading.gif') no-repeat center;
}
.box2 {
width: 400px;
height: 400px;
border: 2px solid #000;
position: relative;
}
.box {
width: 800px;
min-height: 500px;
border: 3px solid orange;
border-radius: 5px;
position: relative;
}
.news {
display: flex;
height: 120px;
width: 600px;
margin: 0 auto;
padding: 20px 0;
cursor: pointer;
}
.news .left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 10px;
}
.news .left .title {
font-size: 20px;
}
.news .left .info {
color: #999999;
}
.news .left .info span {
margin-right: 20px;
}
.news .right {
width: 160px;
height: 120px;
}
.news .right img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
扫一扫
6466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
