前端框架Vue（Vue 的挂载点与 data 数据对象）

2301_801252222025-10-24 10:30

Vue 的挂载点与 data 数据对象

在 Vue.js 中，el 挂载点和 data 数据对象是核心概念，用于定义 Vue 实例的初始结构和数据。

el 挂载点

el 是 Vue 实例的挂载目标，指定 Vue 实例管理的 DOM 元素。通常是一个 CSS 选择器字符串或直接是一个 DOM 元素。

javascript 复制代码

new Vue({
  el: '#app', // 挂载到 id 为 app 的 DOM 元素
  data: {
    message: 'Hello Vue!'
  }
});

data 数据对象

data 是 Vue 实例的数据对象，用于存储应用的状态。Vue 会递归地将 data 的属性转换为响应式数据。data 必须是纯对象（Plain Object）或返回对象的函数（在组件中必须为函数）

javascript 复制代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    count: 0,
    user: {
      name: 'Alice',
      age: 25
    }
  }
});

示例代码

以下是一个完整的 Vue 实例示例，展示 el 和 data 的使用：

javascript 复制代码

<div id="app">
  <p>{{ message }}</p>
  <button @click="increment">Count: {{ count }}</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      count: 0
    },
    methods: {
      increment() {
        this.count++;
      }
    }
  });
</script>

el 指定挂载到 #app 元素。
data 包含 message 和 count 两个响应式属性。
点击按钮时，count 自增，视图自动更新