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

Vue 的挂载点与 data 数据对象

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

el 挂载点

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

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

data 数据对象

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

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

示例代码

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

<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 自增，视图自动更新