Vue.js教学第二章：Vue实例创建与核心选项全解析

Vue 实例基础：Vue 实例的创建与基本选项详解

在 Vue.js 开发中，Vue 实例是构建应用的核心。通过创建 Vue 实例，我们可以将数据、模板、方法等多种元素组合在一起，形成一个具有响应式特性的前端应用。本文将深入研究 new Vue() 的语法，并详细讲解其基本选项的作用和用法，通过丰富代码示例和图表进行辅助描述。

---

一、Vue 实例的创建

使用 new Vue() 创建一个 Vue 实例，其基本语法如下：

var vm = new Vue({
  // 选项
})

在大括号内，我们可以通过设置不同的选项来定义 Vue 实例的行为和特性。接下来，我们将对几个关键选项进行深入探讨。

---

二、el 选项

el 选项用于指定 Vue 实例挂载的 DOM 元素。它可以是一个 CSS 选择器字符串或一个 DOM 元素。

1. CSS 选择器字符串

<div id="app">Hello Vue!</div>
<script>
  var vm = new Vue({
    el: '#app'
  });
</script>

在这个例子中，Vue 实例会挂载到页面上 ID 为 “app” 的元素上。这种通过 CSS 选择器指定挂载点的方式非常简洁直观，适合在大多数场景下使用，尤其是在初始开发阶段或者简单应用中。

2. DOM 元素

<div id="app">Hello Vue!</div>
<script>
  var appDiv = document.getElementById('app');
  var vm = new Vue({
    el: appDiv
  });
</script>

通过直接传递 DOM 元素的方式，可以更加灵活地控制挂载过程，尤其是在动态生成 DOM 或者与其他 JavaScript 框架集成时。这种方式虽然相对繁琐，但在某些特殊场景下非常有用。

---

三、data 选项

data 选项包含 Vue 实例的数据对象。Vue 会将数据对象中的所有属性转为 getter 和 setter，从而实现响应式数据绑定。

<div id="app">
  <p>{
  { message }}</p>
  <button @click="updateMessage">更新消息</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',