Vue学习笔记——从入门到实战
2026-01-31 14:38:00 0 举报AI智能生成
Vue.js是一款构建用户界面的渐进式JavaScript框架，核心库只关注视图层，易于上手学习和使用。它通过简洁的API及数据驱动的视图更新机制提供高效的DOM操作。开发者可以通过组合Vue组件构建复杂的应用。文档结构清晰，适配多种构建系统，并具有丰富的文档资源和社区支持。Vue具备双向数据绑定（Vue 2），响应式系统（Vue 3），以及组件化和组件间通信等强大的功能。通过阅读本文档的学习笔记，用户可以掌握Vue的基本使用方法、生命周期钩子、指令、插槽、过渡效果、路由管理和状态管理等相关知识点。内容深入浅出，示例丰富，文件类型为`.md`。
作者其他创作
大纲/内容
简介
官方文档
Vue是什么
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。<br>
特性
渐进式框架
是一个框架
是基于 JavaScript 的一个MVVM（Model-View-ViewModel）框架。
也是一个生态
可被逐步集成
可以在完整的项目中使用Vue
可以在某个功能模块中使用Vue
也可以只在某个html文件中使用Vue
响应式系统
数据双向绑定
Vue版本
Vue2
老项目
Vue3
涵盖了Vue2的知识体系，也增加了很多新特性<br>
更好的性能
更新速度
内存占用
Tree-shaking
组合式API
碎片（Fragment）
传送（Teleport）
悬念（Suspense）
更好的TS支持
自定义渲染器API
API风格
选项式API——Vue2/Vue3
组合式API——Vue3
setup()函数
响应式API
reactive()
watchEffect()
ref
readonly
computed
watch
开发准备
前提
已安装Node.js V16.0及以上版本
了解ES6新特性
变量和常量
const
let
函数
箭头函数
默认参数
rest参数
数据结构
Map和Set
Map 是一种存储键值对的对象，任何值（对象或原始值）都可以作为一个键或一个值。
Set 是一种特殊的类型，它类似于数组，但成员的值都是唯一的，没有重复的值。
Symbol
解构赋值
对象解构
数组解构
模板字符串
异步处理
Promise
Async函数
类和模块
类
模块
import
export
创建一个Vue项目
使用CDN
使用NPM
添加项目依赖库：npm install vue@next
创建新的vue项目：npm create vue@latest
初始化项目：npm init vue@latest
使用Vue CLI——推荐方式
安装或卸载CLI
npm install -g @vue/cli
npm uninstall vue-cli-g
创建项目
使用命令：vue create mydemo
使用图形化界面：vue ui
使用Vite——仅支持VUE3.x
创建项目：npm init vite-app myViteApp
安装依赖：npm install
运行：npm run dev
调试工具
vue-devtools
项目目录结构
vite
cli
index.html——项目的主文件
main.js——程序入口的JS文件，主要用于加载各种公共组件和项目需要用到的各种插件
App.vue——单文件组件
package.json——JSON格式的NPM配置文件
打包部署
打包
设置正确的基础路径：在Vue项目的vue.config.js文件中，确保publicPath的值正确设置为你的项目在Nginx服务器上的路径。<br>例如，如果你的项目将在example.com/my-app路径下访问，则应将publicPath设置为'/my-app/'；如果直接在端口下访问，则不用设置publicPath参数。
nginx部署配置
注意事项
打包文件路径配置
打包后的文件要配置在端口对应的root目录下
基础
模板语法
插值
双花括号——文本插值
v-html——原始HTML
VUE将模板编译成虚拟DOM渲染函数
指令
v-bind
简写——：
v-bind:href="url"
:href="url"
:[attribute]="url"
v-on
简写——@
v-on:click="sum"
@click="sum"
v-cloak
条件渲染
v-if
v-else
v-else-if
v-show
v-if是真实的按条件渲染，确保在切换时条件区块内的事件监听和子组件都会被销毁与重建；v-if也是惰性的，如果在初次渲染时条件值为false，则不会做任何事，条件区块只有当条件首次变为true时才被渲染；<br>v-show元素无论初始条件如何，始终会被渲染，只有css的display属性会被切换。<br>v-if有更高的切换开销，v-show有更高的初始渲染开销<br>
列表渲染
v-for
item in items
item of items
通过key管理状态
事件处理
标识
v-on:click="handler"
@click="handler"
@dbclick
参数
e
事件修饰符
.stop
阻止事件冒泡
@click.stop
event.stopPropagation()
.prevent
阻止默认事件
@click.prevent
event.preventDefault()
.self
.capture
.once
.passive
数组变化侦测
变更方法，原来的数组被改变
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换一个数组，返回新的数组
filter()
concat()
slice()
侦听器
关键词
watch
具有响应式的数据可以被侦听，适用于数据变化时执行异步或者开销较大的操作
监听对象变化时可使用
handler
deep:tree
immediate:true
注意事项
侦听器watch中方法的名字需要与被侦听的数据变量名称保持一致
不要使用箭头函数定义监听器函数，但是方法内部可以使用箭头函数
与计算属性的差异
不需要返回新的数据
不能被当做属性使用
计算属性
关键词
computed
作用
把模板中复杂的逻辑放到计算属性中，易于维护
虽然methods中的方法也可以实现同样的功能，但是计算属性仅会在其依赖的数据变化时才重新计算，而方法调用总是在重渲染发生时执行，因此使用计算属性可以提升性能
注意事项
可以像普通的数据属性一样使用计算属性，但如果要修改计算属性，需要为它提供setter函数
数据绑定
属性绑定
写法
v-bind
：
表单输入绑定
关键词
v-model
表单控件类型
文本输入框
单行文本输入框-input text
多行文本输入框-textarea
修饰符
.lazy
.number
只接收输入的数字
.trim
去除前后的空格
复选框-input checkbox
单选按钮-input radio
选择框-select
单选
多选（multiple）
输入内容时同步改变数据项
样式绑定
Class绑定
绑定样式类
绑定对象
绑定多个对象
绑定数组
绑定双目运算符
数组和对象嵌套
Style绑定
不推荐
模板引用
关键词
ref
this.$refs
对DOM进行操作
组件
组件的注册
全局注册
本地注册
注册时采用PascalCase（驼峰命名法,首字母大写），可以采用kebab-case（短横线命名法）来引用，当然也可以直接使用kebab-case方式来注册保持名字的统一性<br>
使用PascalCase注册，kebab-case引用
直接使用kebab-case注册和引用
prop属性——使用props由父组件向子组件传递数据
单向数据流
prop验证
非prop属性
属性继承
class
style
id
type
禁用属性继承
多个根节点上的属性继承
替代方案
可以通过$parent属性访问父组件替代父组件通过prop向子组件传递数据的方式
也可以通过$root属性访问根组件实例
emit事件——子组件向父组件发送消息
父组件访问子组件后子元素，可以个子组件添加一个特殊的ref属性，然后父组件就可以通过$refs属性访问子组件实例或子元素
插槽
关键词
slot
v-slot
简写——#
作用：允许父组件向子组件传递内容，并在子组件内部进行渲染。通过使用插槽，我们可以在子组件中定义一些占位符，然后在父组件中填充真实的内容。
使用Vuex进行状态管理
组件上使用v-model指令
默认参数
prop：modelValue
事件：update:modelValue
示例
自定义参数
prop:自定义参数名称
事件：update:自定义参数名称
自定义参数示例
动态组件
作用：实现多标签页面
使用<keep-alive>元素将动态组件包裹起来可以保持组件的状态，避免切换标签页后重新渲染导致的性能问题<br>
组件生命周期钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated<br>
beforeUnmount
unmounted<br>
初始化vue文件的快捷方式：在src目录下新建XXX.vue文件后，收入vue三个字母即可看到生成默认vue文件的提示符<br>
父子组件之间的通信方法
组合式API对应的生命周期钩子函数的名字需要将首字母大写并添加前缀on，此外 beforeCreate和created没有对应的onXxx()函数，取而代之使用setup()函数
虚拟DOM和render()函数
虚拟DOM
定义：虚拟DOM是一种在内存中以JavaScript对象的形式表示DOM结构的技术，通过对比新旧两棵虚拟DOM树的差异，最小化实际的DOM操作，从而提高页面的性能和渲染效率。
起源：虚拟DOM的概念最初由Facebook团队提出，并在React框架中得到了广泛应用。之后，其他前端框架如Vue.js也引入了虚拟DOM的概念。
render()函数
大多数情况下推荐使用模板构建HTML，而在某些场景中可能需要JS的编程能力使用render()函数
h()函数
进阶主题
前端UI组件——Element
Element UI
Vue2
未考虑移动端
功能更加完整
定义：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，基本不支持手机版。<br>
开发团队：饿了么
Element Plus
Vue3
支持移动端
更加轻量化
定义：基于Vue 3，面向设计师和开发者的组件库，组件布局考虑了手机版展示。
开发团队：开源社区
前端路由——使用Vue Router开发单页面应用
安装vue-router
main.js中引入
基本用法：src/router/index.js
路由使用
动态路由匹配
嵌套路由
命名路由
命名视图
编程式导航
Html5 History模式
createWebHistroy去掉URL中的#
导航守卫
全局守卫
全局前置守卫
router.beforeEach()
登录验证
全局解析守卫
router.beforeResolve()
全局后置钩子
router.afterEach()
页面标题修改
路由独享守卫
beforeEnter
组件内守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
数据获取
导航前获取
导航后获取
服务器通信——使用axios完成ajax请求
安装axios
引入和使用
方法一：直接在组件中引入并使用
方法二：在main.js中进行配置和引入后在组件中通过this.axios来调用axios的方法发送请求<br>
get和post请求
跨域请求数据
在vue.config.js中设置反向代理
并发请求，使用Promise.all实现
拦截器
请求拦截器
响应拦截器
组件状态管理(VueX/Pinia)
VueX
安装Vuex
创建Vuex Store实例:src\store\index.js
每一个Vuex应用的核心是stroe，可以理解为保存应用程序状态的容器
Vuex的状态是响应式的，如果store中的状态发生变化，组件也会相应得到更新
不能直接改变stroe中的状态，需要显示的提交mutation
this.$store.commit()
在Vue应用中注册Vuex Store: main.js中引入
主要属性对象
state
使用$store.state来获取状态
mutations
使用$store.commit来提交mutation
actions
使用$store.dispatch来触发action
getters
使用$store.getters来获取计算属性
Pinia
练习项目
单项练习
网上商城项目
0 条评论
下一页
