vuejs从入门到精通

Posted yangbocsu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs从入门到精通相关的知识，希望对你有一定的参考价值。

尚硅谷Vue2.0+Vue3.0全套教程，全网最新最强vuejs从入门到精通

001 课程简介



002 vue简介


003 Vue官网使用指南

004 搭建Vue开发环境

005 Hello小案例

006 分析Hello案例

初识Vue:

  • 1.想让Vue工作，就必须创建个Vue实例， 且要传入 一个配置对象;
  • 2.root容器里的代码依然符合html规范，只不过混入了一些特 殊的Vue语法:
  • 3.root容器里的代码被称为[Vue模板] ;
  • 4.Vue实例和容器是一一对 应的;
  • 5.真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
  • 6.{{xxx}}中的xx要写js表达式，且xx 可以自动读取到data中的所有属性;
  • 7.一且data中的数据发生改变，那么模板中用到该数据的地方也会自动更新:

007 模板语法

  • 插值语法：多用于标签体中
  • 指令语法：标签属性

008 数据绑定

009 el与data的两种写法

010 理解MVVM

011 Object.define


013 Vue中的数据代理

			1.Vue中的数据代理：
						通过vm对象来代理data对象中属性的操作（读/写）
			2.Vue中数据代理的好处：
						更加方便的操作data中的数据
			3.基本原理：
						通过Object.defineProperty()把data对象中所有属性添加到vm上。
						为每一个添加到vm上的属性，都指定一个getter/setter。
						在getter/setter内部去操作（读/写）data中对应的属性。

014 事件处理

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

015 事件修饰符

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

016 键盘事件

1.Vue中常用的按键别名：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab (特殊，必须配合keydown去使用)
						上 => up
						下 => down
						左 => left
						右 => right

			2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

			3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
						(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
						(2).配合keydown使用：正常触发事件。

			4.也可以使用keyCode去指定具体的按键（不推荐）

			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

017 事件总结

018 姓名案例

019 计算属性

020 计算属性_简写

021 天气案例

022 监视属性

023 深度监视

024 监视的简写形式

025 watch对比computed

026 绑定class样式

027 绑定style样式

028 条件渲染

029 列表渲染

030 key作用与原理

031 列表过滤

032 列表排序

033 更新时的一个问题

034 Vue监测数据的原理_对象

035 Vue.set()方法

036 Vue监测数据的原理_数组

037 总结Vue监视数据

038 收集表单数据

039 过滤器

040 v-text指令

041 v-html指令

042 v-cloak指令

043 v-once指令

044 v-pre指令

045 自定义指令_函数式

046 自定义指令_对象式

047 自定义指令_总结

048 引出生命周期

049 生命周期_挂载流程

050 生命周期_更新流程

051 生命周期_销毁流程

052 生命周期_总结

053 对组件的理解

054 非单文件组件

055 组件的几个注意点

056 组件的嵌套

057 VueComponent构造函数

058 Vue实例与组件实例

059 一个重要的内置关系

060 单文件组件

061 创建Vue脚手架

062 分析脚手架结构

063 render函数

064 修改默认配置

065 ref属性

066 props配置

067 mixin混入

068 插件

069 scoped样式

070 TodoList案例_静态

071 TodoList案例_初始化列表

072 TodoList案例_添加

073 TodoList案例_勾选

074 TodoList案例_删除

075 TodoList案例_底部统计

076 TodoList案例_底部交互

077 TodoList案例_总结

078 浏览器本地存储

079 TodoList_本地存储

080 组件自定义事件_绑定

081 组件自定义事件_解绑

082 组件自定义事件_总结

083 TodoList案例_自定义事件

084 全局事件总线1

085 全局事件总线2

086 TodoList案例_事件总线

087 消息订阅与发布_pubsub

088 TodoList案例_pubsub

089 TodoList案例_编辑

090 $nextTick

091 动画效果

092 过度效果

093 多个元素过度

094 集成第三方动画

095 总结过度与动画

096 配置代理_方式一

097 配置代理_方式二

098 github案例_静态组件

099 github案例_列表展示

100 github案例_完善案例

101 vue-resource

102 默认插槽

103 具名插槽

104 作用域插槽

105 Vuex简介

106 求和案例_纯vue版

107 Vuex工作原理图

108 搭建Vuex环境

109 求和案例_vuex版

110 vuex开发者工具的使用

111 getters配置项

112 mapState与mapGetters

113 mapActions与mapMutations

114 多组件共享数据

115 vuex模块化+namespace_1

116 vuex模块化+namespace_2

117 路由的简介

118 路由基本使用

119 几个注意点

120 嵌套路由

121 路由的query参数

122 命名路由

123 路由的params参数

124 路由的props配置

125 router-link的replace属性

126 编程式路由导航

127 缓存路由组件

128 两个新的生命周期钩子

129 全局前置_路由守卫

130 全局后置_路由守卫

131 独享路由守卫

132 组件内路由守卫

133 history模式与hash模式

134 element-ui基本使用

135 element-ui按需引入

136 vue3简介

137 使用vue-cli创建工程

138 使用vite创建工程

139 分析工程结构

140 安装开发者工具

141 初识setup

142 ref函数_处理基本类型

143 ref函数_处理对象类型

144 reactive函数

145 回顾Vue2的响应式原理

146 Vue3响应式原理_

148 reactive对比ref

149 setup的两个注意点

150 computed计算属性

151 watch监视ref定义的数据

152 watch监视reactive定义的数据

153 watch时value的问题

154 watchEffect函数

155 Vue3生命周期

156 自定义hook

157 toRef与toRefs

158 shallowReactive与shallowRef

159 readonly与shallowReadonly

160 toRaw与markRaw

161 customRef

162 provide与inject

163 响应式数据的判断

164 CompositionA

166 Teleport组件

167 Suspense组件

168 Vue3中其他的改变

以上是关于vuejs从入门到精通的主要内容，如果未能解决你的问题，请参考以下文章

vuejs2从入门到精通视频教程

VueVuejs从入门到精通 - Webpack详解

VueVuejs从入门到精通 - vue-router详解

VueVuejs从入门到精通 - 基本语法

Atom编辑器入门到精通 Atom使用进阶

VueVuejs从入门到精通 - 前端模块化