登录
|
注册
登录
|
注册
首页
课程中心
学习路径
在线实训
机构中心
启慧实验室
森林乐园
关于我们
-
服务政策
-
投诉/意见
首页
课程中心
机构中心
启慧实验室
森林乐园
登录
|
注册
关于我们
-
服务政策
-
投诉/意见
森林文库
编程资讯
正文
VUE.js要学的知识点总结
615
01-13
0
分享:
vue 基础
vue 介绍 渐进式 JavaScript 框架
vue 安装使用 npm init vue@latest
vue 应用实例 createApp() 创建应用实例
模板语法 基于 HTML
响应式基础 reative()、ref()
深入响应式系统 代理 Proxy 和 访问器属性 getter/setter
计算属性 computed()
侦听器 watch()、watchEffect()
样式绑定 增强型 :class 和 :style
条件渲染 v-if v-show
列表渲染 v-for
事件处理 v-on 监听 DOM 事件
表单输入绑定 v-model 双向数据绑定
生命周期钩子 onBeforeMount()、onMounted()、 onBeforeUpdate()、 onUpdated()
模板引用 ref ref 属性
vue 组件
组件基础 defineProps()、defineEmits()
组件注册 app.component() 注册全局组件,components 选项注册局部组件。
props 数据 父组件向子组件单向传递数据
组件事件 defineEmits() 定义事件 emit()触发事件
attribute 透传 自动添加到根元素的 attribute 中
依赖注入 provide() 提供数据,inject() 接收数据
插槽 slot 传递模板片段
异步组件 defineAsyncComponent()
vue 组件复用
组合式函数 封装和复用有状态逻辑
自定义指令 对底层 DOM 访问
插件 app.use()
vue 内置组件
Transition 过度 css 属性 transition、animation、transform
TransitionGroup 过渡组
动画技巧
KeepAlive 缓存组件
Teleport 传送模板
Suspense 异步依赖
TypeScript
TypeScript 总览
TypeScript 与组合式 API
TypeScript 与选项式 API
vue 进阶主题
使用 Vue 的多种方式
Vue 与 Web Components
组合式 API FAQ
渲染机制 虚拟 DOM
渲染函数 & JSX h()、render()
响应性语法糖
单文件组合(SFC)
单文件组件 扩展名为 .vue 的单个文件,增加重复使用
SFC 语法规范
SFC 工具链
<script setup>
<style> 特性 CSS 功能
vue 规模化
路由 vue-router
状态管理 pinia
服务端渲染(SSR)
安全
性能优化
无障碍访问
开发测试
vue 风格指南
风格指南
优先级 A 的规则:必要的 (规避错误)
优先级 B 的规则:强烈推荐 (增强代码可读性)
优先级 C 的规则:推荐 (将选择和认知成本最小化)
优先级 D 的规则:谨慎使用 (潜在风险)
vue 应用实例 API
createApp() 创建一个应用程序实例
createSSRApp() 在 SSR Hydration 模式下创建应用程序实例
app.mount() 挂载
app.unmount() 卸载
app.use() 安装插件
app.component() 全局组件
app.provide() 提供
app.directive() 自定义指令
app.version 版本
app.config 应用程序配置
vue 全局统用 API
nextTick() 等待 DOM 更新后执行
defineComponent() 类型推断
defineAsyncComponent() 定义在渲染时延迟加载的异步组件
defineCustomElement() 自定义元素
vue 响应式 API
setup()
ref() 返回 响应式 ref 对象
reactive() 响应式代理
computed() 计算属性
readonly() 只读属性
watch() 侦听器
watchEffect() 效应侦听器
isRef() 检查 ref 对象
unref() 返回值
toRef() 同步响应式
toRefs() 转换为普通对象
isProxy() 检查代理
isReactive() 检测代理
isReadonly() 检测只读
shallowRef() 浅层响应式 ref()
shallowReactive() 浅版本的reactive()
shallowReadonly() 浅层 readonly
triggerRef() 强制触发与 ref 关联的 effect 效应
customRef() 自定义 ref
toRaw() 返回原始代理对象
markRaw() 标记原始对象
effectScope() effect 作用域
getCurrentScope() 返回当前活跃的 effect 作用域
onScopeDispose() 当前 effect 上,注册回调
vue 生命周期钩子 API
onBeforeMount() 挂载组件之前调用
onMounted() 组件挂载后调用
onBeforeUpdate() 组件更新之前调用
onUpdated() 更新 DOM 后调用
onBeforeUnmount() 卸载之前调用
onUnmounted() 卸载组件后调用
onErrorCaptured() 捕获后代组件错误时调用
onRenderTracked() 渲染跟踪到响应性依赖时调用
onRenderTriggered() 响应式依赖触发渲染时调用
onActivated() 启动 KeepAlive 时调用
onDeactivated() 删除 KeepAlive 后调用
onServerPrefetch() 服务器上呈现组件实例之前调用
vue 组件实例(选项式 API )
$data 组件实例的数据对象
$props 组件接收到的 props 对象
$options 组件实例的初始化选项
$parent 父实例
$root 根组件实例
$slots 被插槽分发的内容
$refs 持有注册过 ref attribute 的所有 DOM 元素和组件实例
$attrs 包含了父作用域中不作为组件 props 或自定义事件
$watch 侦听组件实例上
$emit 触发当前实例上的事件
$forceUpdate 迫使组件实例重新渲染
$nextTick 将回调延迟到下次 DOM 更新循环之后执行
vue 内置指令 API
v-text 更新元素的文本内容
v-html 更新元素的innerHTML
v-pre 显示原始 Mustache 标签
v-cloak 设置样式
v-slot 插槽
v-show 切换元素的隐现
v-on 绑定事件监听器
v-bind 动态绑定
v-model 双向绑定
v-for 渲染元素或模板块
v-once 只渲染元素和组件一次
v-is 检测动态组件
v-if 条件渲染
v-else 动态条件渲染 else块
v-else-if 表示 v-if 的else if 块
vue 特殊属性 API
is 使用动态组件
key key属性
ref ref 被用来给元素或子组件注册引用信息
vue 内置组件 API
<component> 渲染动态组件
<transition> 渲染过度效果
<transition-group> 多列表过渡
<keep-alive> 会缓存不活动的组件实例
<slot> 内容分发插槽
<teleport> 封装组件
<Suspense> 编排组件树中的嵌套异步依赖项
vue 依赖注入 API
provide() 提供
inject() 注入
vue 渲染函数 API
h() 创建虚拟节点
mergeProps() 合并 props 对象
cloneVNode() 克隆虚拟节点
isVNode() 检测虚拟节点
resolveComponent() 解析组件
resolveDirective() 解析指令
withDirectives() 向虚拟节点添加自定指令
withModifiers() 给事件处理函数添加修饰符
createRenderer() 自定义渲染器
vue 服务器渲染函数 API
renderToString() 服务器渲染
renderToNodeStream() 渲染节点流
pipeToNodeWritable() 将输入渲染为 Node.js 可读流。
renderToWebStream() 将输入呈现为Web可读流
pipeToWebWritable() 通过管道输出 web 实例
SimpleStream() 输出简单的数据流
useSSRContext() 检测上下文对象
vue TypeScript 工具类 API
PropType<T> 注解 props 类型
ComponentCustomProperties 自定义组件属性
ComponentCustomOptions 自定义组件选项
ComponentCustomProps 自定义组件 props
CSSProperties 用于增加样式属性绑定中的允许值
Pinia(状态管理)
什么是 Pinia
Pinia 入门安装
defineStore
state
getters
actions
Plugins(插件)
在组件之外使用 Store
在非 setup 中使用 Pinia
组合 Store
组合式函数
Pinia 与 服务器端渲染(SSR)
Pinia 与 服务器端渲染 Nuxt.js 框架
Pinia Store 测试
Pinia 热更新
vue router(路由)
vue-router 入门安装 router-view 匹配组件 router-link 创建链接
动态路由 $route.params、$route.query、$route.path、$route.has
嵌套路由 children 选项
编程式的导航 router.push()、router.replace()、router.go()
命名路由 路由设置上 name 选项
命名视图 router-view 使用 name 属性
重定向和别名 redirect 重定向,alias 定义别名
路由组件传参 将 props 传递给路由组件
不同的历史记录模式 history: createWebHistory()
导航守卫 beforeEach(),beforeResolve(),afterEach(),beforeEnter(),
路由元信息 meta 属性
过渡动效 基于 transition 组件,route.meta.transition 动态动画
数据获取 created() 钩子内 watch(),beforeRouteEnter()、beforeRouteUpdate() 守卫
滚动行为 scrollBehavior()
路由懒加载 箭头函数 返回 import()
导航故障 isNavigationFailure()
扩展 RouterLink RouterLink.props
Vue Router 和 组合式 API useRouter()、 useRoute()、 onBeforeRouteUpdate()、onBeforeRouteLeave()
Vue Router API
vuex(状态管理)
vuex 是什么 状态管理模式库
vuex 安装 npm install vuex@next --save
vuex 使用示例 store 实例,state 数据是响应式的,mutations修改数据选项
state 子组件通过 $store 访问其数据
getter getter 返回对象或者函数
mutation store.commit 触发同步回调
action 异步提交 mutation,dispatch() 分发
module store分割成模块
项目结构
插件 plugins选项
严格模式 strict: true
表单处理 带有 setter 的双向绑定 computed
热重载 webpack中插件
对 Vuex 中的 mutation 和 action 进行单元测试
vuex 与 TypeScript useStore
vuex 与 组合式 API
vuex API
axios 网络请求库
Axios 是什么
axios 用例 get请求、post请求、多个并发请求
axios API axios()请求
axios 实例 axios.create()创建实例
请求配置 axios(config)
响应结构 axios 响应信息
默认配置
拦截器
错误处理 catch(function (error)) 处理错误信息
取消请求 axios.CancelToken
请求体编码 qs 库
vue3 项目实战
在 centOS 上安装 vscode + eslint + prettier
在 centOS 上安装 npm、yarn、pnpm
在 centOS 上安装 express、webpack、rollup
vite + vue3 + ts + vue-router + pinia + axios
vite + vue3 + ts 安装 scss + qs + nprogress
vite + vue3 + ts 安装 element-plus
vite + vue3 + ts 安装 tinymce 富文本编辑器
vite + vue3 + ts 安装 @vitejs/plugin-legacy 兼容旧版浏览器
vite + vue3 + ts 配置 babel 浏览器兼容性插件
vite + vue3 + ts 开发配置
vite + vue3 + ts + SSR 使用 Vite 内置 SSR 功能
vite + vue3 + ts + SSR 使用 vite-ssr 插件
vite + vue3 + ts + SSR 使用 vite-plugin-ssr 框架
vite + vue3 + ts + SSR 使用 ssr 框架
vite + vue3 + ts + SSR 使用 Nuxt 框架
vite + vue3 + ts + SSR 使用 Quasar 框架
vite + vue3 + ts + SSG 使用 VuePress
vite + vue3 + ts + SSG 使用 VitePress
Markdown 语法教程
oauth2.0认证(token认证)
跨域资源共享 CORS
laravel9 安装配置
laravel9 + vue3 后端配置跨域资源共享(CORS)
laravel9 + vue3 后端使用 passport 来生成验证 token
laravel9 + vue3 前端使用 axios 获取携带 token 访问令牌
axios 发送数据请求的方式