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