Vue.js 应用的结构概览

Vue 实例

作为一款渐进式框架，Vue.js 可以轻松集成到任何网页中，从而控制整个页面或其中某一部分的功能。与其他前端框架类似，Vue 可以作为一个 实例 添加到网页中，其所有资源都包含在这个对象内部。每个 Vue.js 应用程序都是从初始化一个 Vue 实例开始的。Vue 实例的创建方式如下：

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

如上所示，Vue() 是一个构造函数，它接收一个 JavaScript 对象（{...}）作为参数。传入 Vue 构造函数的对象具有预定义的结构，包含一些 键 和对应的 值。这些键代表某些属性，而它们的值则定义了 Vue.js 实例的行为。

注意： Vue 实例可以在 HTML 文件中通过 <script> 标签定义，也可以放在单独的 .js 文件中，并在 HTML 页面中导入。

尽管 Vue 实例中可以定义许多属性/键，但以下是一些最核心且初学者必须掌握的关键项：

1. el
2. template
3. data
4. methods

这些看起来可能有些复杂，但别担心！我们将逐一详细解释。

el

当创建一个 Vue 实例时，它会查找网页中需要控制的元素。这个元素由开发者指定，通常通过给某个元素（如 div）添加一个 id 属性来实现。然后将该 id 作为 el 键的值传递给 Vue 实例，以便明确告诉 Vue 应该挂载到哪个元素上。

1<!-- 这是被赋予 id='app' 的 div -->
2<div id='app'></div>
3
4<script>
5new Vue({
6    // 使用此 id 作为 el 的值，表示 Vue 应该挂载到该元素上
7    el: '#app'  
8})
9</script>

template

template 定义了 Vue 实例将要 渲染的内容。它是一个类似 HTML 的结构，可以被 Vue 实例所控制。这个模板内容会替换掉 HTML 文件中 id 与 el 值匹配的那个元素。

1<!-- 这是被赋予 id='app' 的 div -->
2<div id='app'></div>
3
4<script>
5new Vue({
6    // 使用此 id 作为 el 的值，表示 Vue 应该挂载到该元素上
7    el: '#app' ,
8    
9    // 模板中的 div 将替换掉 id 为 'app' 的 div
10    template: `
11      <div>
12        <h1>我是来自 Vue 实例的模板！</h1>
13      </div>
14    `
15})
16</script>

data

data 是 Vue 实例的 数据存储中心，用于存放应用所需的所有变量。

1<!-- 这是被赋予 id='app' 的 div -->
2<div id='app'></div>
3
4<script>
5new Vue({
6    // 使用此 id 作为 el 的值，表示 Vue 应该挂载到该元素上
7    el: '#app' ,
8    
9    // 模板中的 div 将替换掉 id 为 'app' 的 div
10    template: `
11      <div>
12        <h1>我是来自 Vue 实例的模板！</h1>
13      </div>
14    `,
15    data: {
16      name: 'John',
17      age: 26
18    }
19})
20</script>

methods

除了 template（展示）和 data（数据存储），Vue 实例还可能需要执行一些操作。为此，可以通过 methods 键定义自己的方法或函数。

1<!-- 这是被赋予 id='app' 的 div -->
2<div id='app'></div>
3
4<script>
5new Vue({
6    // 使用此 id 作为 el 的值，表示 Vue 应该挂载到该元素上
7    el: '#app' ,
8    
9    // 模板中的 div 将替换掉 id 为 'app' 的 div
10    template: `
11      <div>
12        <h1>我是来自 Vue 实例的模板！</h1>
13      </div>
14    `,
15    data: {
16      name: 'John',
17      age: 26
18    },
19    methods: {
20      incrementAge() {
21            this.age++
22        }
23    }
24})
25</script>

提醒： 必须确保已通过 <script> 标签引入 Vue.js 后才能创建 Vue 实例，例如： <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

总结

总结本课内容，下方提供的可运行示例可以帮助你在理解基本结构后，动手实践一个 Vue.js 应用！

在下面的代码示例中，Vue 实例定义在独立的 JavaScript 文件中，可通过 JavaScript 标签 查看。

欢迎随意修改代码，观察效果变化！

在上述示例中，请重点关注 template、data 和 methods 如何协同工作，构建出一个完整且交互式的 Vue 应用。

注意： 如果你目前对示例中的某些内容还不完全理解，也无需担心。那些尚未讲解的内容（如 click 事件监听器）将在后续课程中详细介绍。