![](https://img-blog.csdnimg.cn/8a2e8c5e2c4c43b2a0ba1a63af0e470b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js 3.0 从入门到实战
文章平均质量分 92
该栏目下的文章为学习 孙 鑫的《Vue.js 3.0 从入门到实战》而做的笔记
一只小熊猫呀
这个作者很懒,什么都没留下…
展开
-
一、Vue.js 概述
● Vue 2.x 响应式系统的实现原理● Vue 3.0 响应式系统的实现原理● 体验 Vue 3.0 响应式系统● Vue 3.0 带来的新变化原创 2022-09-05 18:24:45 · 1288 阅读 · 0 评论 -
二、准备开发与调试环境
● 安装 Vue.js ○ 使用 CDN ○ 使用 npm ○ 使用 Vue CLI ○ 使用 Vite● 学习 Vue 3.0 源码● 安装 Visual Studio Code● 安装 vue-devtools原创 2022-09-16 14:07:05 · 1305 阅读 · 8 评论 -
三、ECMAScript 6 语法简介(1)
● 块作用域构造 ○ let 声明 ○ const 声明 ○ 全局块作用域绑定● 模板字面量 ○ 多行字符串 ○ 字符串占位符● 默认参数● rest 参数● 展开运算符原创 2022-09-21 18:10:21 · 2196 阅读 · 0 评论 -
三、ECMAScript 6 语法简介(2)
● 对象字面量语法扩展 ○ 属性初始值的简写 ○ 对象方法的简写语法 ○ 可计算的属性名● 解构赋值 ○ 对象解构 ○ 数组解构原创 2022-09-22 15:08:42 · 1665 阅读 · 0 评论 -
三、ECMAScript 6 语法简介(3)
● 箭头函数 ○ 箭头函数的语法 ○ 箭头函数与this● Symbol ○ 创建 Symbol ○ Symbol与类型转换 ○ 作为属性名使用 ○ 共享的 Symbol原创 2022-09-22 15:09:36 · 1596 阅读 · 0 评论 -
三、ECMAScript 6 语法简介(4)
● 类 ○ 类的定义 ○ 访问器属性 ○ 静态方法 ○ 类的继承● 模块原创 2022-09-22 15:10:33 · 1763 阅读 · 0 评论 -
三、ECMAScript 6 语法简介(5)
● Promise ○ 基本用法 ○ 创建已处理的 Promise ○ 响应多个 Promise● async 函数 ○ 基本用法 ○ await 和并行任务执行 ○ 使用 async 函数重写 Promise 链 ○ 错误处理原创 2022-09-26 14:03:11 · 1656 阅读 · 0 评论 -
四、Vue.js 模板语法
● 应用程序实例● 插值● 指令原创 2022-09-26 15:43:40 · 4768 阅读 · 0 评论 -
五、指令(1)
● 内置指令 ○ v-show ○ v-if、v-else-if、v-else ○ v-for ■ 遍历数组 ■ 数组更新检测 ■ 过滤与排序 ■ 遍历整数 ■ 遍历对象 ■ 在 template上使用 v-for ■ key 属性 ■ v-for与v-if一同使用原创 2022-09-26 18:08:54 · 1115 阅读 · 0 评论 -
五、指令(2)
● v-bind● v-model● v-on ○ 事件修饰符 ○ 按键修饰符 ○ 系统修饰键 ○ .exact 修饰符 ○ 鼠标按钮修饰符原创 2022-09-27 11:53:13 · 1688 阅读 · 0 评论 -
五、指令(3)
● v-text ● v-html● v-once● v-pre● v-cloak● v-slot原创 2022-09-27 14:23:12 · 1710 阅读 · 0 评论 -
五、指令(4)
● 自定义指令 ○ 钩子函数 ○ 动态指令参数 ○ 函数简写 ○ 对象字面量原创 2022-09-27 16:20:25 · 1950 阅读 · 0 评论 -
五、指令(5)
● 实例 ○ 通过指令实现下拉菜单 ○ 使用自定义指令实现随机背景色原创 2022-09-27 16:37:15 · 1759 阅读 · 0 评论 -
六、计算属性(1)
● 计算属性的定义● 计算属性的缓存● v-for和v-if替代方案原创 2022-09-27 17:17:31 · 1709 阅读 · 0 评论 -
六、计算属性(2)
实例:购物车的实现原创 2022-09-27 17:49:24 · 1809 阅读 · 0 评论 -
七、监听器
● 使用监听器● 监听器的更多形式● 实例方法 watch原创 2022-09-29 11:49:47 · 1549 阅读 · 0 评论 -
八、class 与 style 绑定(1)
● 绑定 HTML class ○ 对象语法 ○ 数组语法 ○ 在组件上使用 class 属性原创 2022-09-29 15:05:55 · 1955 阅读 · 0 评论 -
八、class 与 style 绑定(2)
● 绑定内联样式 ○ 对象语法 ○ 数组语法 ○ 多重值● 实例:表格奇偶行应用不同样式原创 2022-09-29 15:39:07 · 4869 阅读 · 0 评论 -
九、表单输入绑定
● 单行文本输入框● 多行文本输入框● 复选框● 单选按钮● 选择框● 值绑定 ○ 复选框 ○ 单选按钮 ○ 选择框的选项● 实例:用户注册原创 2022-09-29 17:17:21 · 1229 阅读 · 0 评论 -
十、组件(1)
● 全局注册与本地注册● 使用prop向子组件传递数据原创 2022-10-08 18:21:16 · 1639 阅读 · 0 评论 -
十、组件(2)
● 单向数据流● prop 验证● 非prop的属性 ○ 属性继承 ○ 禁用属性 ○ 多根节点上的属性继承原创 2022-10-08 18:23:56 · 4801 阅读 · 0 评论 -
十、组件(3)
● 监听子组件事件● 在组件上使用 v-model 指令 ○ v-model 的参数 ○ 处理 v-model 的修饰符原创 2022-10-12 14:28:46 · 4831 阅读 · 0 评论 -
十、组件(4)
● 实例:combobox● 使用插槽分发内容 ○ 编译作用域 ○ 默认内容 ○ 命名插槽 ○ 作用域插槽 ○ 动态插槽名原创 2022-10-12 15:56:56 · 4712 阅读 · 0 评论 -
十、组件(5)
● 动态组件● 异步组件原创 2022-10-12 17:10:17 · 1827 阅读 · 0 评论 -
十、组件(6)
● 组件的生命周期 ○ beforeCreate ○ created ○ beforeMount ○ mounted ○ beforeUpdate ○ updated ○ activated ○ deactivated ○ beforeUnmount ○ unmounted ○ errorCaptured ○ renderTracked ○ renderTriggered原创 2022-10-24 15:29:01 · 1044 阅读 · 0 评论 -
十、组件(7)
● 单文件组件● 组件通信的其它方式 ○ 访问根实例 ○ 访问父组件实例 ○ 访问子组件实例或子元素 ○ provide 和 inject原创 2022-11-13 13:57:41 · 4883 阅读 · 0 评论 -
十、组件(8)
● 递归组件● 异步更新队列● Teleport原创 2022-11-13 17:04:57 · 1035 阅读 · 1 评论 -
十一、组合API(1)
● 为什么要引入组合API● setup() 函数原创 2022-11-21 18:18:49 · 1068 阅读 · 0 评论 -
十二、组合API(2)
● 响应式 API ○ reactive() 方法 ○ watchEffect() 方法 ○ 解构响应性状态 ○ 深入 watchEffect() ○ ref ○ readonly ○ computed ○ watch原创 2022-11-22 18:14:26 · 4433 阅读 · 0 评论 -
十一、组合API(3)
● 生命周期钩子● 依赖注入● 逻辑提取和重用原创 2022-11-23 16:58:06 · 4529 阅读 · 0 评论 -
十二、虚拟 DOM 和 render() 函数(1)
● 虚拟DOM● render()函数原创 2022-11-23 17:14:42 · 1563 阅读 · 0 评论 -
十二、虚拟 DOM 和 render() 函数(2)
● 用普通 JavaScript 代替模板功能 ○ v-if 和 v-for ○ v-model ○ v-on ○ 事件和按键修饰符 ○ 插槽● JSX● 实例:帖子列表原创 2022-11-24 11:15:15 · 1521 阅读 · 0 评论 -
十三、Vue CLI(1)
● 简介● 安装● 创建项目 ○ vue create ○ 使用图形界面原创 2022-12-02 14:12:08 · 1633 阅读 · 0 评论 -
十三、Vue CLI(2)
● 项目结构● 编写一个 Hello 组件● package.json原创 2022-12-02 18:48:02 · 4723 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(1)
● 感受前端路由 ○ HTML 使用路由 ○ 模块开发使用路由原创 2022-12-04 16:21:16 · 1467 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(2)
● 动态路由匹配 ○ 查询参数● 路由匹配语法 ○ 参数的自定义正则表达式 ○ 可重复参数 ○ 可选参数● 嵌套路由原创 2022-12-04 16:23:14 · 1191 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(3)
● 命名路由● 命名视图● 编程式导航● 传递 prop 到路由组件● HTML 5 history 模式原创 2022-12-04 16:25:28 · 1137 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(4)
● 导航守卫 ○ 全局守卫 ○ 路由独享的守卫 ○ 组件内守卫 ○ 导航解析流程原创 2022-12-10 16:08:45 · 2002 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(5)
● 数据获取● Vue Roter 与组合 API ○ 在 setup() 函数中访问 Router 和当前路由 ○ 导航守卫 ○ useLink● 滚动行为原创 2022-12-10 17:56:27 · 1116 阅读 · 0 评论 -
十四、使用 Vue Router 开发单页应用(6)
● 延迟加载路由● 等待导航结果● 动态路由 ○ 添加路由 ○ 在导航守卫中添加路由 ○ 删除路由 ○ 添加嵌套路由 ○ 查看现有路由原创 2022-12-14 17:46:12 · 1373 阅读 · 0 评论