-
一、vue学习中的知识点:
- Vue起步
- 首先使用Vue编写一个属于自己的Hello World
- Vue开发TodoList
- MVVM设计模式
- 前端组件化
- 组件化思维修改TodoList
- 简单的父子组件传值
- Vue基础
- Vue实例
- 文本与属性绑定
- Vue中的生命周期函数
- Vue的模版语法
- 计算属性( computed),方法与侦听器(watch)
- 计算属性的setter和getter
- Class与Style样式绑定,条件与列表渲染
- Vue中的set方法
- 事件与表单绑定
- Vue实例生命周期
- Vue插件和模板过滤器
- axios请求库
- VueRouter路由系统
- VueCLI脚手架工具
- Vue中的组件
- 组件的使用
- 父子组件传值与组件参数校验
- 原生事件绑定与非Props特性
- 使用bus进行非父子组件间传值
- 插槽的使用
- 动态组件
- Vue中的动画
- Vue中的CSS动画原理
- Vue中使用animate.css库
- Vue中同时使用过渡与动画效果
- Vue中使用Velocity.js库
- Vue中多组件和列表过度
- Vue中动画的封装
- webpack
- 安装与基本配置
- 打包JavaScript模块
- 打包CSS模块
- 打包图片和字体文件模块
- 打包less/sass资源模块
- ES6转ES5
- 打包.vue资源模块
- 配置ESLint代码校验工具
- 使用clean-webpack-plugin插件清除打包结果目录
- 使用HtmlWebpackPlugin打包HTML资源
- 处理打包结果的Sourcemaps
- 监视打包模式
- 使用webpack-dev-server
- 模块打包热更新
- treeshaking打包优化
- 生产环境和开发环境分离打包
- 打包优化之CodeSplitting代码分割
- 打包优化之模块懒加载
- 打包优化之缓存
- vue进阶
- 组件封装进阶
- MVVM数据绑定原理
- Render方法原理
- $nextTick方法的使用
- 发布订阅模式
- 服务端渲染
- SSR核心概念
- SSR基本用法
- 编写通用代码
- 路由和代码分割
- 构建配置
- Nuxt.js
- Vue起步
-
二、vue开发技能
1、组件通讯:
父子组件通讯:父组件向子组件传递数据,使用prop属性,子组件向父组件传递数据;通过子组件this.$emit(event,data)派发事件及数据至父组件;
非父子组件通讯:Global Event Bus,利用全局注册vue实例,再定义全局事件对数据进行操作(少用);使用vuex公共状态管理进行组件间通讯;
2、插槽:
为灵活实现组件内容定制化,vue引入插槽功能。分为普通插槽和作用于插槽,再vue2.6.0中,对两种插槽进行统一的语法处理,即使用v-slot代替了slot和slot-scope特性,虽已启用但仍未删除。
3、过度动画:
触发条件: v-if或动态组件或v-show或组件根节点
过度类名:v-enter\v-enter-to\v-enter-active、及leave类似
JavaScript钩子:
<transition
@before-enter="beforeEnter
…
/>
4、DOM操作:
尽管vue的初衷有一部分是为了减少开发者操作DOM,但在实际开发中,我们不得不对DOM 进行操作,如css配合原声JS库操作;
5、组件封装:
就近管理: 单文件开发是组件化的一大特点,可以将组件中h5、js、css(即展示层、表现层、逻辑层)放入单个页面,静态资源、关联文件都可以放在同级目录中;
复用性:页面的复用、项目的复用、公司的开源组件复用
分层设计:可将单个页面进行拆分
6、keep-alive:
使用场景: 保留组件状态,或避免重新渲染组件
生命周期:activated、deactivate激活和失活时触发
7、内存泄漏:
产生原因:未清理的定时器,或未清理的全局注册组件
避免:在组件销毁前的生命周期做事件处理
错误调试:在开发中会经常出现积累异常错误,如计算书香赋值、禁止对prop直接修改,未注册组件等错误
调试工具:可以利用谷歌调试工具、vue-devtools进行调试
8、Vue-router
Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的 核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:1、嵌套的路由/视图表 2、模块化的、基于组件的路由配置 3、路由参数、查询、通配符 4、基于 Vue.js 过渡系统的视图过渡效果 5、细粒度的导航控制 6、带有自动激活的 CSS class 的链接 7、HTML5 历史模式或 hash 模式,在 IE9 中自动降级 8、自定义的滚动条行为
9、Vuex
Vuex 是什么?“Vuex 是一个专为 Vue.js 应用程序开发的++状态管理++模式”。详细可阅读[官方文档](官方文档), 状态自管理应用包含以下几个部分: 1、state,驱动应用的数据源; 2、view,以声明方式将 state 映射到视图; 3、actions,响应在 view 上的用户输入导致的状态变化。
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
数据流向:
10、Vue - 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
参考:
Vue.js:https://cn.vuejs.org/
Vue Router:https://router.vuejs.org/zh/
Vuex:https://vuex.vuejs.org/zh/
评论区