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

2025.4.27 Vue.js 基础学习笔记

ai 2025/5/2 19:04:28

一、Vue.js 简介

Vue.js（简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。它具有以下特点：

轻量级 ：核心库体积小，性能优秀，不占用过多资源，加载速度快，适合各种规模的应用开发。
易上手 ：基于标准的 HTML、CSS 和 JavaScript 构建，对于有一定前端基础的开发者来说，学习成本较低，容易快速入门并应用到项目中。
双向数据绑定 ：通过数据双向绑定机制，使得视图和模型之间能够自动同步，当数据发生变化时，视图会自动更新，反之亦然，大大简化了数据与视图之间的交互开发流程。
组件化架构 ：支持将界面拆分成多个独立、可复用的组件，每个组件包含自己的模板、逻辑和样式，便于开发、维护和管理复杂的前端应用，提高代码的可复用性和可维护性。

二、Vue.js 环境搭建

1. 直接引入 Vue.js 文件

在 HTML 文件中，通过 CDN（内容分发网络）直接引入 Vue.js 库是最简单的方式，适合快速学习和小型项目。例如：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

这种方式无需安装额外的构建工具，但不适合大型项目或生产环境，因为它没有充分利用模块化和构建优化的优势。

2. 使用构建工具（如 Vue CLI）

Vue CLI 是一个官方提供的 Vue.js 项目脚手架工具，可以帮助快速搭建项目骨架，包含各种项目的配置和依赖管理。使用 Vue CLI 创建项目步骤如下：

安装 Vue CLI：在终端输入 npm install -g @vue/cli 进行全局安装。
创建项目：运行 vue create 项目名称，然后按照提示选择需要的配置选项，如 Vue 版本、预处理器（如 Sass、Less 等）、路由功能、状态管理（Vuex）等。
进入项目目录并启动项目：使用 cd 项目名称 进入项目文件夹，然后执行 npm run serve 启动开发服务器，默认情况下会在本地 http://localhost:8080/ 地址打开项目。

使用构建工具可以更好地组织项目结构，进行代码分割、热重载、代码压缩等优化操作，适合中大型项目的开发需求。

三、Vue.js 基本概念

1. Vue 实例

Vue 应用程序是由 Vue 实例构成的，通过 new Vue() 创建。最基本的 Vue 实例代码结构如下：

var vm = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});

其中：

el 选项：指定 Vue 实例挂载的 DOM 元素，通常是一个 CSS 选择器字符串，表示 Vue 将接管对应元素及其内部的所有 HTML 内容，进行数据绑定和编译处理。在上面的例子中，el 指向页面中带有 id="app" 的 HTML 元素。
data 选项：包含 Vue 实例所管理的数据对象，内部的数据属性可以在模板中使用双花括号语法进行绑定展示，如 {{ message }}，当 data 中的数据发生变化时，视图会自动更新。
Vue 实例（vm）：是整个 Vue 应用的核心对象，它管理着数据、视图以及各种生命周期和方法等，在开发过程中可以利用 vm 来访问和操作 Vue 应用的数据、方法和生命周期钩子等。

2. 模板语法

Vue.js 使用 HTML 模板语法来声明式地将数据渲染到 DOM 中，主要有以下两种方式：

插值表达式（双花括号语法） ：用于文本内容的动态绑定，如 {{ message }}，它会将 data 中对应的 message 数据值插入到 HTML 元素的文本节点中。当 message 的值发生变化时，页面上的显示内容会自动更新。
指令：指令是带有 v- 前缀的特殊 HTML 属性，用于给 HTML 素添加动态行为，实现数据与视图之间的各种交互功能。常见的指令包括：
- v-bind 指令：用于动态地绑定一个或多个属性到元素上，如绑定 id、class、style 等属性。例如： <div v-bind:id="dynamicId"></div> 其中 dynamicId 是 Vue 实例 data 中的一个数据属性，其值会动态地绑定到 div 元素的 id 属性上。简写形式为 :，即 :id="dynamicId"。
- v-on 指令：用于监听 DOM 事件，如点击、鼠标悬停、键盘按键等事件，绑定对应的处理函数。例如： <button v-on:click="handleClick">点击我</button> 当点击该按钮时，会触发 Vue 实例中的 handleClick 方法。简写形式为 @，即 @click="handleClick"。

3. 计算属性和侦听器

计算属性 ：通过定义计算属性，可以根据 Vue 实例中的一个或多个数据属性动态地计算出一个新的值，并且这个计算属性是响应式的。当依赖的数据发生变化时，计算属性会自动重新计算并更新视图。计算属性通过在 Vue 实例的 computed 选项中定义方法来实现，例如：

var vm = new Vue({el: '#app',data: {firstName: 'John',lastName: 'Doe'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}}
});

在模板中可以通过 {{ fullName }} 来显示计算后的完整姓名，当 firstName 或 lastName 发生变化时，fullName 会自动更新。

侦听器 ：如果需要在数据发生变化时执行一些自定义的逻辑，而不是仅仅计算出一个新值，可以使用侦听器。通过在 Vue 实例的 watch 选项中定义对应的侦听函数，可以监听指定数据属性的变化，并执行相应的回调处理函数。例如：

var vm = new Vue({el: '#app',data: {count: 0},watch: {count: function (newValue, oldValue) {console.log('count 从 ' + oldValue + ' 变为 ' + newValue);// 在这里可以添加 count 改变后的处理逻辑}}
});

当 count 的值发生变化时，控制台会输出变化前后的值，并可以执行其他相关的操作。

4. 条件渲染和列表渲染

条件渲染 ：使用 v-if、v-else-if 和 v-else 指令可以根据条件来动态地渲染 HTML 元素。例如：

<div v-if="isLoggedIn">用户已登录
</div>
<div v-else>用户未登录
</div>

isLoggedIn 是 Vue 实例 data 中的一个布尔值数据属性，根据其值的真假来决定显示对应的登录状态提示信息。

列表渲染 ：通过 v-for 指令可以基于一个数组或对象来渲染列表元素。例如，渲染一个数组：

var vm = new Vue({el: '#app',data: {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]}
});

<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-for 指令会根据 items 数组中的每个元素生成一个 <li> 元素，并显示对应的 name 属性值。其中的 :key 属性用于为每个列表项提供一个唯一的标识，有助于 Vue 更高效地进行渲染和更新操作。

5. 表单输入绑定

Vue.js 提供了 v-model 指令用于实现表单输入和 Vue 实例数据之间的双向数据绑定。当用户在表单元素（如输入框、复选框、单选按钮、下拉选择框等）中输入数据时，绑定的数据属性会自动更新，同时视图中其他与该数据绑定的地方也会相应地进行更新。例如：

<input v-model="message" placeholder="输入内容">
<p>输入的内容是：{{ message }}</p>

当在输入框中输入文本时，message 数据属性的值会实时更新，同时下方的段落元素也会动态显示输入的内容。

四、Vue.js 组件

组件是 Vue.js 的核心概念之一，它使得我们可以将复杂的用户界面拆分成一个个独立、可复用的模块，每个模块专注于实现特定的功能。

1. 组件的注册和使用

全局注册 ：使用 Vue.component() 方法全局注册一个组件，这样在应用中的任何地方都可以使用这个组件。例如：

Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
});

然后在 Vue 实例的模板中可以使用 <my-component></my-component> 来渲染该组件。

局部注册 ：如果只想在某个特定的 Vue 实例中使用某个组件，可以在 Vue 实例的 components 选项中进行局部注册。例如：

var vm = new Vue({el: '#app',components: {'local-component': {template: '<div>这是一个局部组件</div>'}}
});

在对应的 Vue 实例模板中可以使用 <local-component></local-component> 来渲染这个局部组件。

2. 组件的 props 和自定义事件

Props ：是父组件向子组件传递数据的一种方式，子组件通过定义 props 选项来接收来自父组件的数据。例如：

Vue.component('child-component', {props: ['parentData'],template: '<div>子组件接收到的数据：{{ parentData }}</div>'
});

在父组件中使用该子组件时，可以通过绑定属性的方式将数据传递给子组件：

<child-component :parent-data="parentMessage"></child-component>

其中 parentMessage 是父组件中的一个数据属性，通过 v-bind 指令（简写为 :）将其绑定到子组件的 parent-data prop 上，子组件就可以接收到这个数据并在模板中使用。

自定义事件 ：子组件可以通过 $emit() 方法向父组件发送自定义事件，父组件可以监听这些事件并执行相应的处理函数。例如：

Vue.component('child-component', {props: ['parentData'],template: '<button @click="sendMessage">发送消息到父组件</button>',methods: {sendMessage: function () {this.$emit('child-event', this.parentData);}}
});

在父组件中使用该子组件并监听自定义事件：

<child-component :parent-data="parentMessage" @child-event="handleChildEvent"></child-component>

methods: {handleChildEvent: function (dataFromChild) {console.log('父组件接收到子组件发送的数据：', dataFromChild);// 在这里可以添加父组件接收到事件后的处理逻辑}
}

当子组件中的按钮被点击时，会触发 sendMessage 方法，该方法通过 $emit 发送一个名为 child-event 的事件，并将 parentData 作为事件参数传递给父组件。父组件通过 @child-event 监听该事件，并在 handleChildEvent 方法中处理接收到的数据。

五、Vue.js 生命周期

Vue 实例从创建到销毁的过程称为生命周期，在这个过程中有不同的生命周期钩子函数，它们允许我们在特定的时刻执行自定义的逻辑，如进行数据初始化、DOM 操作、清理资源等。主要的生命周期钩子包括：

beforeCreate ：在实例初始化之后、数据观测和 DOM 编译之前调用。此时实例的挂载元素 el 和 data 都还没有进行初始化，无法访问到数据和 DOM。
created ：实例创建完成后被调用，此时数据观测和事件系统已经初始化完成，可以访问到实例中的数据和方法，但挂载元素 el 还没有被编译，DOM 尚未生成，因此不能进行 DOM 操作。
beforeMount ：在挂载开始之前被调用，相关的编译模板已经完成，此时挂载元素 el 已经被编译为虚拟 DOM，但还未渲染到页面上，还不能进行 DOM 查询等操作。
mounted ：当 Vue 实例挂载到 DOM 后被调用，此时实例已经完成了编译和挂载，可以访问到最终的 DOM 元素，通常在这里进行 DOM 操作、与外部库的交互或者发送 API 请求获取初始数据等操作。
beforeUpdate ：当数据发生变化，Vue 实例准备更新 DOM 时被调用，此时数据已经更新，但 DOM 还没有更新，可以在这个钩子中进行一些数据更新前的操作，比如取消未完成的异步请求等。
updated ：在 DOM 更新完成后被调用，此时数据和 DOM 都已经更新完毕，可以在这里进行一些依赖最新 DOM 状态的操作，但要小心不要在这个钩子中触发新的更新，否则会导致无限循环。
beforeDestroy ：在 Vue 实例销毁之前被调用，此时实例仍然完全可用，可以在这里进行一些资源的清理工作，如取消定时器、事件监听器等。
destroyed ：在 Vue 实例销毁后被调用，此时所有的指令、事件监听器、子实例等都已经被解绑和销毁，实例不能再被使用。