

首页  思维导图  详情



Vuejs知识量化

2020-12-07 13:41:05   0  举报





AI智能生成

关于vuejs的思维导图

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

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的封装<br>

JSON原理的回顾<br>

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安装

修改配置和部署

 Collect

Get Started

验收标准量化模型

 Collect

Get Started

矢量化流程

 Collect

Get Started

CTP量化交易平台架构

 Collect

Get Started

知识蒸馏





0 条评论

下一页