前言
上一篇中我们学习了vue.js 目录结构、模板语法之插值等知识点，这一篇我们将接着Vue系列实例化的学习。
1️⃣ Vue的实例化
在使用 Vue.js 搭建前端时，每个 Vue 应用都需要通过实例化 Vue 来实现。
要实例化Vue，需要按照以下步骤进行操作：
1.引入Vue库：在HTML文件中，使用<script>标签引入Vue的CDN或本地路径：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建Vue实例：在JavaScript代码中，使用new Vue()来创建Vue实例。可以传入一个配置对象，其中包含了组件的各种配置项，如数据、方法、模板等。
var vm = new Vue({ // 配置项 });
3.设置挂载点：通过el配置项，将Vue实例挂载到一个具体的DOM元素上，使其可以操作该元素及其子节点。
var vm = new Vue({ el: '#app' // 挂载点为id为"app"的元素 });
4.设置数据和方法：通过data和methods配置项，设置Vue实例的数据和方法。
var vm = new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, methods: { greet: function() { alert(this.message); } } });
5.编写模板：在HTML文件中，通过指定的挂载点元素内部编写Vue模板。可以使用双大括号语法（{{ }}）来绑定数据，并在需要的地方调用方法。
<div id="app"> <p>{{ message }}</p> <button @click="greet">Say Hello</button> </div>
methods 用于定义的函数，可以通过 return 来返回函数值。
经过以上配置和模板编写后，Vue实例已经被完全实例化并挂载到指定的DOM元素上了。此时，Vue会自动将数据绑定到模板，实现数据的双向绑定效果，并且可以响应用户的交互操作。
也就是说，通过以上步骤，就可以完成Vue的实例化，使其能够在网页中显示和交互。
接着我们细讲一下创建Vue实例这个步骤。
一般来说，在创建Vue实例的时候，Vue 构造器中需要的内容有多种：
1. 模板（template）：Vue构造器中的模板是用来定义组件的HTML结构。它可以使用Vue提供的模板语法和指令来绑定数据和处理逻辑。
在Vue构造器中，模板可以使用以下几种方式来定义：
- 字符串模板，实例如下：
new Vue({ template: '<div>{{ message }}</div>', data: { message: 'Hello, Vue!' } });
在这种方式中，模板被直接定义为一个字符串，并使用template选项将其传递给Vue实例。
- 单文件组件：
单文件组件是使用.vue文件扩展名创建的Vue组件。它包含了模板、脚本和样式，通常用于更复杂的应用程序或组件开发。
<!-- MyComponent.vue --> <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; } }; </script> <style> /* 样式 */ </style>
在使用单文件组件时，需要通过构建工具（如Webpack、Vue CLI等）将其编译为浏览器可识别的代码。
- 使用el挂载到现有元素：
<div id="app"></div> new Vue({ el: '#app', template: '<div>{{ message }}</div>', data: { message: 'Hello, Vue!' } });
在这种方式中，Vue实例会将模板内容插入到指定的DOM元素中，替换掉该元素的内容。
2. 数据对象（data）：在Vue中，数据对象是指用于存储和管理数据的JavaScript对象。Vue构造器中必须包含一个数据对象，用来存储组件的数据。这些数据对象通常被绑定到Vue实例或Vue组件上，以便在模板中进行数据绑定和响应式更新。
在Vue中，可以使用以下几种方式来定义数据对象：
- 在Vue实例中使用
data选项：
new Vue({ data: { message: 'Hello, Vue!', count: 0 } });
在这个示例中，data选项是一个对象，其中包含了message和count两个属性作为数据对象的成员。这些数据可以在模板中通过双花括号语法进行绑定。
- 在Vue组件中使用
data选项：
Vue.component('my-component', { data() { return { message: 'Hello, Vue!', count: 0 } } });
在Vue组件中，也可以通过data选项定义数据对象。每个组件实例都会有自己独立的数据对象。
3. 方法（methods）：Vue构造器中可以定义多个方法，用于处理组件内部的事件和逻辑。这些方法可以被模板中的事件指令或其他逻辑调用。
4. 计算属性（computed）：计算属性是Vue构造器中的一个特殊属性，用于根据已有的数据计算派生出新的属性。
5. 监听器（watch）：监听器是Vue构造器中的另一个特殊属性，用于观察和响应数据的变化。当定义的数据发生变化时，可以执行相应的操作。
6. 生命周期钩子函数（lifecycle hooks）：Vue构造器中有一系列的生命周期钩子函数，用于在组件不同阶段执行相应的操作。
7. 属性（props）：属性是Vue构造器中允许从父组件传递数据给子组件的机制。通过定义props属性，可以将外部数据传递给组件，并在组件内部使用。
知道了Vue构造器的基本组成和语法结构，我们就可以开始构建Vue实例了。
举个实例：
首先我们引入vue库：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
接着创建一个vm实例并且设置一个id为qiu的挂载点：
var vm = new Vue({ el: '#qiu' // 挂载点为id为"qiu"的元素 });
然后设置Vue实例的数据：
var vm = new Vue({ el: '#qiu', data: { message: '秋说' }, });
vm实例包含了一个数据字段message，初始值为"秋说"。
接着编写模板：
<!DOCTYPE html> <html> <head> <title>Vue 实例化示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="qiu"> <h1>{{ message }}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#qiu', data: { message: '秋说' } }); </script> </body> </html>
浏览器打开html文件：
可看到页面回显：
至此，实例化就成功了。
2️⃣ Vue逻辑理解
我们可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
我们对代码所做的全部改动，都在以上指定的 div 内，div 外部不受影响。
怎么理解这句话呢？我举个例子你就懂了
我们定义两个div元素，一个带有id为"sql"，另一个带有id为"xss"，并且将CSS样式文件链接到HTML文件：
<!DOCTYPE html> <html> <head> <title>div内外部示例</title> <link rel="stylesheet" href="file:///C:/Users/86177/Desktop/1.css"> </head> <body> <div id="sql"> <h1>This is the sql div.</h1> </div> <div id="xss"> <h1>This is the xss div.</h1> </div> </body> </html>
css文件内容如下：
这样，id为"app"的div元素将具有背景颜色，而id为"xss"的div元素将保持默认样式，不带背景颜色。
效果图如下：
id为sql的div元素背景变蓝，而id为xss的div元素没有变蓝。 而这就是对 “我们对代码所做的全部改动，都在以上指定的 div 内，div 外部不受影响。” 这句话的理解和实操。
3️⃣ 总结
以上为前端开发：一文带你精通Vue.js前端框架系列（三），带领读者在Vue上起步，搭建一个vue实例化并且理解Vue的div逻辑。
在开发中，理解框架的底层代码逻辑是十分重要的，这能够帮助你更好地理解运行规则，以上操作读者可躬身实践。
后续将分享前端开发：一文带你精通Vue.js前端框架系列（四），读者可订阅专栏持续学习。
