vue遮罩和ref的使用方法是什么
更新时间：2023-08-02
前言：
Vue.js 是一款轻量级的JavaScript框架，用于构建用户界面。它使用组件化开发方式，使得页面结构更加清晰和可维护。Vue提供了一些特性，如遮罩和ref，可以帮助我们在页面中实现一些复杂的交互效果。本文将分别介绍Vue中遮罩和ref的使用方法，并给出代码示例和详细说明。
一、Vue遮罩的使用方法：
在Vue中，遮罩是一种常见的交互效果，用于实现弹出框、对话框等需要屏蔽页面其他内容的场景。Vue提供了v-show或v-if指令来动态控制元素的显示和隐藏，我们可以结合这些指令来实现遮罩效果。
1. 添加遮罩层的HTML结构：
```html
```
在页面中添加一个class为mask的div元素，通过v-show指令控制其显示和隐藏。
2. 在Vue实例中设置遮罩的显示状态：
```javascript
data() {
return {
showMask: false
}
}
```
在Vue实例中定义一个showMask变量，默认为false，表示遮罩初始状态为隐藏。
3. 控制显示和隐藏遮罩：
```html
```
通过在按钮上绑定click事件来改变showMask的值，从而控制遮罩的显示和隐藏。
4. 样式设置：
```html
```
通过设置遮罩层的position为fixed，覆盖整个页面，并设置背景颜色为半透明黑色，实现遮罩效果。
二、Vue中ref的使用方法：
在Vue中，ref是一个特殊的属性，用于给元素或子组件注册引用信息，可以通过$refs来访问所注册的元素或组件。ref在访问DOM元素或子组件时非常有用，尤其是需要操作DOM或获取子组件实例的场景。
1. 注册ref：
```html
```
在组件中的HTML中，我们可以使用ref属性为元素添加一个引用信息。在上面的例子中，我们为h4标签和p标签分别添加了两个ref，分别为"title"和"content"。
2. 访问ref：
```javascript
methods: {
handleClick() {
console.log(this.$refs.title.innerText); // 打印标题文本
console.log(this.$refs.content.innerText); // 打印内容文本
}
}
```
在Vue中，我们可以通过this.$refs来访问所注册的ref。通过innerText属性，我们可以获取到相应元素的文本内容。
3. 访问子组件的ref：
```html
标题
内容
