2025.4.28 Vue.js 学习笔记
一、Vue.js 简介
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，具有轻量级、易上手、双向数据绑定和组件化架构等特点，可帮助开发者高效构建动态、交互式的 Web 应用。
二、环境搭建
-
直接引入 Vue.js 文件 ：在 HTML 文件中通过 CDN 引入 Vue.js 库，如
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>，适合快速学习和小型项目。 -
使用构建工具（如 Vue CLI） ：
-
安装 Vue CLI ：
npm install -g @vue/cli。 -
创建项目 ：
vue create 项目名称，按提示选择配置选项。 -
启动项目 ：
cd 项目名称，npm run serve，默认在http://localhost:8080/打开项目。
-
三、核心概念
-
Vue 实例 ：通过
new Vue()创建，包含el（挂载元素）、data（管理的数据）等选项，是 Vue 应用的核心对象。 -
模板语法
-
插值表达式 ：用
{{ message }}动态绑定文本内容。 -
指令 ：如
v-bind（:）用于动态绑定属性，v-on（@）用于监听 DOM 事件。
-
-
计算属性和侦听器
-
计算属性 ：在
computed选项中定义方法，根据数据属性动态计算值，响应式更新视图。 -
侦听器 ：在
watch选项中定义侦听函数，监听数据变化并执行自定义逻辑。
-
-
条件渲染和列表渲染
-
条件渲染 ：用
v-if、v-else-if和v-else指令根据条件渲染元素。 -
列表渲染 ：用
v-for指令基于数组或对象渲染列表元素，并用:key提供唯一标识。
-
-
表单输入绑定 ：用
v-model指令实现表单输入和数据之间的双向绑定。
四、组件
-
组件的注册和使用
-
全局注册 ：
Vue.component('组件名称', {template: '组件模板'})，可在应用中任何地方使用。 -
局部注册 ：在 Vue 实例的
components选项中注册，仅在该实例中使用。
-
-
组件的 props 和自定义事件
-
Props ：父组件通过
v-bind向子组件传递数据，子组件用props选项接收。 -
自定义事件 ：子组件用
$emit()向父组件发送事件，父组件用@事件名监听并处理。
-
五、Vue.js 生命周期
Vue 实例从创建到销毁的过程包含多个生命周期钩子，如beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，可在特定时刻执行自定义逻辑，确保应用高效运行。