Vuejs知识量化
2020-12-07 13:41:05 0 举报AI智能生成
关于vuejs的思维导图
作者其他创作
大纲/内容
一、邂逅Vuejs
1.遇见Vuejs
为什么学习Vuejs
前端开发的复杂化
Vuejs的特点
2.安装Vuejs
直接CDN引入
下载和引入
NPM安装
CLI和NPM结合使用
3.体验Vuejs
Hello Vuejs
Vue显示列表
实现计数器
4.MVVM架构
data和Vue对象的分离
Vue中的MVVM
二、Vue基础语法
1.插值语法
Mustache
v-once
v-html
v-text
v-pre
v-block
2.绑定属性
v-bind的介绍
v-bind的基础
v-bind语法糖
绑定class
绑定样式
计算属性
3.事件监听
v-on介绍
v-on基础
v-on参数
v-on修饰符
4.条件和循环
条件渲染
v-show指令
v-if和v-show对比
v-for指令
5.阶段案例
6.表单绑定
基本使用
v-model原理
其他类型
值绑定
修饰符
三、组件化开发
1.认识组件化
什么是组件化
Vue组件化思想
2.组件化基础
1>注册组件
注册的基本步骤
全局和局部组件
父组件和子组件
注册组件语法糖
模板的分离写法
组件的其他属性
2>数据传递
父级向子级传递
子级向父级传递
父子组件的访问
非父子组件通信
3.组件化高级
插槽slot
编辑作用域
为什么使用solt
slot的基本使用
slot的具名插槽
slot作用于插槽
动态组件
异步组件
4.组件声明周期
四、Vue CLI详解
1.webpack
1>什么是webpack
2>webpack和gulp对比
3>手动webpack的配置
2.Vue CLI
1>Vue CLI是什么?
2>Vue CLI以来环境
3>Vue CLI的安装
3.Vue CLI2的使用
1> Vue CLI2配置过程
2>Vue CLI2目录结构
3> 入口文件详解
Vue渲染过程
render函数的使用
4> webpack配置解析
4.Vue CLI3的使用
1> Vue CLI3配置过程
2> Vue CLI3 目录结构
3> Vue CLI3配置修改
Vue UI
配置存放路径
添加新的别名
五、vue-router
1.认识路由的概念
1>认识路由
2>后端路由时代
3>前后端分类时代
4>前端路由的时代
2.前端路由的规则
1>URL的hash
2>HTML5的history
pushState
replaceState
go
3.route-view基础
1>认识和安装vue-router
2>vue-router基本使用
步骤一：创建路由组件
步骤二：配置组件和路径的映射关系
步骤三：使用路由
3>vue-route细节补充
路由的默认路径
HTML5的History模式
router-link补充
路由代码跳转
4.路由的懒加载
1>什么是路由懒加载
2>懒加载和非懒加载打包区别
3>懒加载的方式
方式一：结合Vue的异步组件和Webpack的代码分析
方式二：ADM写法
方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
5.路由嵌套使用
1>认识嵌套路由
2>嵌套路由实现
3>嵌套默认路径
6.路由传递参数
1>准备工作
第一步：创建新的组件P肉file.vue
第二步：配置路由映射
第三步：添加跳转的<router-link>
2>params方式
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router?id=123,/router?id=abc
3.query方式
配置路由格式：/router,也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123,/router?id=abc
4.获取参数
获取参数通过$.route对象获取的
在使用了vue-router应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换时，路由对象会被更新
5.$route和$router的区别
$router为VueRouter实例，想要导航到不同的URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等
7.路由导航守卫
1>钩子函数
beforeEach
afterEach
2>守卫应用
动态改变页面标题
3>参数解析
to：即将要进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子
8.keep-alive
1>认识keep-alive
2>遇见vue-router
9.TabBar练习
六、Vuex详解
1.为什么使用Vuex
1>Vuex是做什么的？
官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。
状态管理到底是什么？
有什么状态时需要我们在多个组件共享的呢？
2>单页面状态管理
3>多页面状态管理
4>Vuex状态管理图例
2.Vuex基本使用
1>Vuex安装
2>Vuex的代码组织
3>count案例的实现
3.Vuex核心概念
1>state
State单一状态树
2>getter
Getters基本使用
Getters本身作为参数
Getters传递参数
3>Mutation
mutation基本使用
mutation传递参数
mutation提交风格
mutation响应规则
mutation常量管理
mutation同步函数
4>Action
Action基本定义
Action的分发
Action返回的Promise
5>Module
认识Vuex的Module
Module的局部状态
Module的Actions写法
4.项目组织结构
子主题
5.TODOLIST练习
七、网络封装
1. 网络模块选择
选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax
选择三: 官方在Vue1.x的时候, 推出了Vue-resource.
选择四: Vue作者推荐的axios
2. JSON的封装
JSON原理的回顾
JSON代码的封装
3.axios的使用
1>认识axios
为什么选择axios
axios请求方式
2>发送请求
发送get请求
发送并发请求
axios全局配置
常见配置选项
3>axios实例
为什么创建axios实例
如何创建axios实例
axios的封装
4>axios的拦截器
请求拦截器
相应拦截器
八、项目实战
九、项目部署
1.winidows上NGINX部署
windows上NGINX安装
项目打包过程
修改配置和部署
2.远程Linux上NGINX部署
centos上NGINX安装
修改配置和部署
职业：大专
0 条评论
下一页
