Vue基本使用之对象提供的属性功能

Vue.js 是一款构建数据驱动的 Web 应用程序的前端框架，提供一系列的属性、指令和组件等功能，方便开发者进行页面开发和交互操作。

其中，Vue对象提供了一些常用的属性功能，本文将介绍Vue对象提供的属性功能的使用方法。

Vue实例中提供的属性

Vue提供了许多属性来控制实例中的数据和行为，以下是常用的一些属性：

`$data`

$data属性可以获取Vue实例中的data属性的值，也可以用于修改Vue实例中的data属性值。以下是一个例子：

<template>
  <div>
    <h1>{{ message }}</h1>
    <div>
      <input type="text" v-model="message" />
      <button @click="updateMessage">Update</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    methods: {
      updateMessage() {
        this.$data.message = 'Hello, Vue!'
      }
    }
  }
</script>

在上面的例子中，我们定义了一个message属性，可以通过this.$data.message获取其值或对其进行修改。

`$el`

$el属性可以获取Vue实例所挂载的DOM元素。以下是一个例子：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    mounted() {
      console.log(this.$el);
    }
  }
</script>

在上面的例子中，当Vue实例被挂载到DOM上时，this.$el就会返回实例所挂载的DOM元素。

`$refs`

$refs属性可以获取Vue实例中的ref属性所关联的DOM元素或组件。以下是一个例子：

<template>
  <div>
    <h1 ref="heading">{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    mounted() {
      console.log(this.$refs.heading.innerText);
    }
  }
</script>

在上面的例子中，当Vue实例被挂载到DOM上时，this.$refs.heading就会返回与ref="heading"关联的DOM元素。