当前位置：首页 > news >正文

VUE 入门级教程：开启 Vue.js 编程之旅

news 2025/12/11 8:25:12

一、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() {// 可以在这里操作 DOMvar element = this.$el;console.log('实例已挂载到 DOM，元素高度为：', element.offsetHeight);
}