VUE 入门级教程：开启 Vue.js 编程之旅
一、Vue.js 简介
Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发，能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层，通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新，让开发者可以高效地构建交互性强且易于维护的前端应用。
二、环境搭建
在开始使用 Vue.js 之前，我们需要搭建相应的开发环境。
（一）引入 Vue.js
- 可以直接通过 CDN 引入 Vue.js。在 HTML 页面的
<head>部分添加以下代码：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
这种方式适用于简单的学习和快速原型开发。
（二）使用 Vue CLI（命令行工具）
- 首先，确保已经安装了 Node.js。然后，在命令行中全局安装 Vue CLI：
npm install -g @vue/cli
- 安装完成后，可以使用
vue create命令创建一个新的 Vue 项目。例如：
vue create my-vue-project
按照提示选择相应的配置项，如是否使用 Babel、ESLint 等，即可创建一个基于 Vue.js 的基础项目结构。这是开发较为复杂的 Vue 应用的推荐方式，它提供了项目构建、开发服务器、热重载等一系列便捷的功能。
三、Vue 实例
Vue.js 的核心是 Vue 实例。每个 Vue 应用都是通过创建一个新的 Vue 实例来启动的。
// 创建一个 Vue 实例
var vm = new Vue({
// 选项对象
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
在上述代码中，el选项指定了 Vue 实例挂载的 DOM 元素，这里是id为app的元素。data选项是一个对象，用于存储应用的数据。在这个例子中，message是一个数据属性，其值为Hello, Vue!。
四、数据绑定
Vue.js 最强大的特性之一就是数据绑定，它实现了数据与 DOM 的双向数据绑定，当数据发生变化时，DOM 会自动更新，反之亦然。
（一）文本插值
使用双花括号{{ }}进行文本插值，可以将数据渲染到 HTML 页面中。例如：
<div id="app">
<p>{{ message }}</p>
</div>
当 Vue 实例中的message数据发生变化时，页面中的文本也会随之更新。
（二）指令绑定
Vue.js 提供了一系列指令来实现更丰富的 DOM 操作。
v-bind指令：用于绑定 HTML 属性。例如，绑定src属性：
<img v-bind:src="imageUrl">
这里imageUrl是 Vue 实例data中的一个属性，当imageUrl的值改变时，图片的src属性也会相应改变。可以简写为:src，如<img :src="imageUrl">。
v-on指令：用于绑定事件监听器。例如，绑定点击事件：
<button v-on:click="handleClick">点击我</button>
当按钮被点击时，会调用 Vue 实例中定义的handleClick方法。简写为@click，即<button @click="handleClick">点击我</button>。
五、条件渲染与列表渲染
（一）条件渲染
v-if指令：根据表达式的值来决定是否渲染元素。例如：
<div v-if="isShow">
<p>只有当 isShow 为 true 时才会显示</p>
</div>
当isShow为true时，<div>及其内部元素才会被渲染到页面中；否则，不会显示。
v-else指令：与v-if配合使用，用于在v-if条件不满足时渲染另一个元素。例如：
<div v-if="isShow">
<p>显示内容 1</p>
</div>
<div v-else>
<p>显示内容 2</p>
</div>
v-else-if指令：可以在多个条件判断中使用，例如：
<div v-if="score >= 90">
<p>优秀</p>
</div>
<div v-else-if="score >= 80">
<p>良好</p>
</div>
<div v-else-if="score >= 60">
<p>及格</p>
</div>
<div v-else>
<p>不及格</p>
</div>
（二）列表渲染
v-for指令：用于遍历数组或对象，并渲染相应的元素。例如，遍历一个数组：
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
这里items是 Vue 实例data中的一个数组，v-for会遍历items数组，为每个元素创建一个<li>元素，并将item.name渲染到<li>中。:key属性是必需的，它用于帮助 Vue 识别每个节点的身份，提高渲染效率和更新的准确性。
六、组件化开发
Vue.js 鼓励组件化开发，将复杂的应用拆分成多个独立的、可复用的组件，每个组件都有自己的模板、数据和逻辑。
（一）创建组件
// 定义一个名为 MyComponent 的组件
Vue.component('my-component', {
template: '<div><h3>这是我的组件</h3><p>{{ componentMessage }}</p></div>',
data: function() {
return {
componentMessage: '组件数据'
};
}
});
（二）使用组件
在 HTML 模板中使用组件：
<div id="app">
<my-component></my-component>
</div>
当页面加载时，<my-component>标签会被替换为组件的模板内容，并显示相应的数据。
七、Vue 生命周期钩子
Vue 实例在创建到销毁的过程中会经历一系列的生命周期阶段，每个阶段都有对应的钩子函数，可以在这些函数中执行特定的操作。
例如：
created钩子：在实例创建完成后立即调用，此时数据观测、事件配置等都已完成，但 DOM 尚未挂载。可以在这个阶段进行数据的初始化操作。
new Vue({
el: '#app',
data: {
//...
},
created: function() {
// 在这里进行数据初始化等操作
console.log('实例已创建');
}
});
mounted钩子：在实例挂载到 DOM 后调用，此时可以访问到 DOM 元素。通常在这个阶段进行一些需要 DOM 操作的初始化，如获取元素的高度、宽度等。
mounted: function() {
// 可以在这里操作 DOM
var element = this.$el;
console.log('实例已挂载到 DOM，元素高度为：', element.offsetHeight);
}