notes_estom/Vue

01-ES6补充

• 1. 块级作用域
  • 1.1. 什么是变量作用域
  • 1.2. 没有块级作用域造成的问题
    • if块级
    • for块级
• 2. const的使用
• 3. ES6的增强写法
  • 3.1. ES6的对象属性增强型写法
  • 3.2 ES6对象的函数增强型写法
• 4. 箭头函数
  • 4.1 箭头函数的参数和返回值
    • 4.1.1 参数问题
    • 4.1.2 函数内部
  • 4.3 箭头函数的this使用
• 5. 高阶函数
  • 5.1 filter过滤函数
  • 5.2 map高阶函数
  • 5.3 reduce高阶函数
  • 5.4综合使用

02-HelloVue

• 1. HelloVuejs
  • 1.1. 命令式编程
  • 1.2 . 声明式编程
• 2. vue列表的展示（v-for）
• 3. vue案例-计数器

03-插值操作

• 1. Mustache语法
• 2. v-once
• 3. v-html
• 4. v-text
• 5. v-pre
• 6. v-cloak

04-动态绑定属性

• 1. v-bind的基本使用
• 2. v-bind动态绑定class
  • 2.1. v-bind动态绑定class(对象语法)
  • 2.2. v-bind动态绑定class(数组用法)
• 3. v-for和v-bind结合
• 4. v-bind动态绑定style
  • 4.1 v-bind动态绑定style(对象语法)
  • 4.2 v-bind动态绑定style(数组语法)

05-计算属性与侦听器

• 1. 计算属性的基本使用
• 2. 计算属性的复杂使用
• 3. 计算属性的setter和getter
• 4. 计算属性和methods的对比
• 5. Vue计算属性与侦听器总结

06-事件监听

• 1. v-on的基本使用
• 2. v-on的参数传递
• 3. v-on的修饰词

07-条件判断

• 1. v-if、v-else、v-elseif
• 2. v-if的demo
• 3. v-show

08-循环遍历

• 1. v-for遍历数组
• 2. v-for遍历对象
• 3. v-for使用key
• 4. 数组的响应方式
• 5. 综合练习

09-综合练习

• 1. 目录结构
• 2. index.html
• 3.main.js
• 4. style.css
• filter、map、reduce

10-v-model

• 1. v-model的基本使用
• 2. v-model的原理
• 3. v-model结合radio类型使用
• 4. v-model结合checkbox类型使用
• 5. v-model结合select
• 6. v-model的修饰符的使用

11-组件化开发

• 1. 组件的基本使用
  • 1.1 创建组件构造器对象
  • 1.2 注册组件
  • 1.3 使用组件
• 2. 全局组件和局部组件
  • 2.1 全局组件
  • 2.2 局部组件
• 3. 父组件和子组件的区别
• 4. 注册组件的语法糖
• 5. 组件模板的分离写法
  • 5.1 script标签
  • 5.2 template标签
• 6. 组件的数据
  • 6.1 存放问题
  • 6.2 组件的data为什么必须要是函数
• 7. 父组件给子组件传递数据
  • 7.1 使用props属性，父组件向子组件传递数据
  • 7.2 props属性使用
• 8. 组件通信
  • 8.1 父传子（props的驼峰标识）
  • 8.2 子传父$emit
  • 8.3 父子组件通信案例
• 9. 父访问子（children-ref）

12-组件化高级

• 1. slot-插槽的基本使用
• 2. slot-具名插槽的使用
• 3. 编译的作用域
• 4. 作用域插槽案例

13-Vue实例的生命周期

• 1. 生命周期图
• 2. 再探究
  • 2.1 beforeCreate之前
  • 2.2 beforeCreate和created钩子函数间的生命周期
  • 2.3 created钩子函数和beforeMount间的生命周期
    • 2.3.1 el选项对生命周期影响
    • 2.3.2 template
  • 2.4 beforeMount和mounted钩子函数间的生命周期
  • 2.5 beforeUpdate钩子函数和updated钩子函数间的生命周期
  • 2.6 beforeDestroy和destroyed钩子函数间的生命周期
    • 2.6.1 beforeDestroy
    • 2.6.2 destroyed
• 总结

14-前端模块化

• 1. 为什么要模块化
• 2. 使用导出全局变量模块解决全局变量同名问题
• 3. CommonJS的模块化实现
• 4. ES6的模块化实现
  • 4.1 直接导出
  • 4.2 统一导出
  • 4.3 导出函数/类
  • 4.4 默认导入 export default
  • 4.5 统一全部导入

15-webpack

• 1. webpack起步
  • 1.1 什么是webpack
  • 1.2 webpack的安装
  • 1.3 起步
    • 目录结构
    • 1.新建入口js文件main.js和mathUtils.js，main.js依赖mathUtils.js。
    • 2.使用webpack命令打包js文件
    • 3.新建一个index.html文件，导入bundle.js
    • 4.新建一个info.js使用ES6的语法导出
    • 5.打开index.html测试
• 2. webpack的配置
  • 2.1 基本配置
    • 1.在根目录下新建一个webpack.config.js
    • 2.在根目录执行npm init初始化node包，因为配置文件中用到了node的path包
    • 3.使用webpack打包
    • 4.使用自定义脚本（script）启动
  • 2.2 全局安装和局部安装
• 3. webpack的loader
  • 3.1 什么是loader
  • 3.2 CSS文件处理
  • 3.3 less文件处理
  • 3.4 图片文件的处理
  • 3.5 ES6语法处理
• 4. webpack的vue
  • 4.1 简单安装使用vue
  • 4.2 如何分步抽取实现vue模块
• 5. webpack的plugin
  • 5.1 添加版权的Plugin
  • 5.2 打包html的plugin
  • 5.3压缩打包代码插件
• 6. webpack搭建本地服务器
• 7. webpack的配置文件分离

16-VueCLI

• 1. vue-cli起步
  • 1.1 什么是vue-cli
  • 1.2 CLI是什么意思？
  • 1.3 vue cli使用
• 2. vue-cli2的目录结构
  • 2.1 build和config
  • 2.2 src和static
  • 2.3 其他相关文件
    • 2.3.1 .babelrc文件
    • 2.3.2 .editorconfig文件
    • 2.3.3 .eslintignore文件
    • 2.3.4 .gitignore文件
    • 2.3.5 .postcssrc.js文件
    • 2.3.6 index.html文件
    • 2.3.7 package.json和package-lock.json
• 3. runtime-compiler和runtime-only区别
• 4. vue-cli3
  • 4.1 vue-cli3起步
  • 4.2 vue-cli3的配置

17-Vue-Router

• 1. 路由简介
• 2. 前端/后端路由
• 3. URL的hash和HTML5的history
  • 3.1 URL的hash
  • 3.2 HTML5的history模式
• 4. vue-router的安装配置
• 5. vue-router的使用
  • 5.1 创建路由组件
  • 5.2 配置路由映射：组件和路径映射关系
  • 5.3 使用路由：通过<router-link>和<router-view>
  • 5.4 路由的默认值和history模式
  • 5.5 <router-link>的其他属性
  • 5.6 通过代码修改路由跳转
• 6. vue-router深入
  • 6.1 vue-router的动态路由
  • 6.2 vue-router的打包文件解析
  • 6.3 嵌套路由
  • 6.4 vue-router的参数传递
  • 6.5 router和route的由来
• 7. vue-router其他
  • 7.1 vue-router的导航守卫
  • 7.2 导航守卫补充
  • 7.3 完整的导航解析流程
• 8. keep-alive

18-Promise

• 1. 什么是Promies
• 2. Promise的基本使用
  • 2.1 什么时候使用Promise
  • 2.2 Promise对象
• 3. Promise的三种状态
• 4. Promies的链式调用
• 5. Promies的all使用

19-Vuex

• 1. 什么是Vuex
  • 1.1 使用场景
  • 1.2 数据流层
    • 注意事项
• 2. 核心概念
  • 2.1 state
    • 2.1.1 在 Vue 组件中获得 Vuex 状态
    • 2.1.2 mapState 辅助函数
  • 2.2 Getter
    • 2.2.1 通过属性访问
    • 2.2.2 通过方法访问
    • 2.2.3 mapGetters 辅助函数
  • 2.3 Mutation
    • 2.3.1 提交载荷（Payload）
    • 2.3.2 对象风格的提交方式
    • 2.3.3 Mutation 需遵守 Vue 的响应规则
    • 2.3.4 使用常量替代 Mutation 事件类型
    • 2.3.5 Mutation 必须是同步函数
    • 2.3.6 在组件中提交 Mutation
  • 2.4 Action
    • 2.4.1 分发 Action
    • 2.4.2 在组件中分发 Action
    • 2.4.3 组合 Action
  • 2.5 Module
    • 2.5.1 模块的局部状态
    • 2.5.2 命名空间
• 3. Vuex项目开发中常见的文件布局
  • 3.1 项目结构
  • 3.2 文件的说明
• 4. Vuex的简单案例
  • 4.1 目录结构
  • 4.2 新建store存储于vuex相关
    • 4.2.1 state.js
    • 4.2.2 getters.js
    • 4.2.3 mutations-types.js
    • 4.2.4 mutations.js
    • 4.2.5 index.js
  • 4.3 在main.js中注册store
  • 4.4 在App.vue中使用
  • 4.5 结果
• 5. Vuex工作原理详解
  • 5.1 理解computed
    • vue中data属性和computed相关的源代码
      • initData
      • initComputed
    • defineComputed所代理属性的get方法
    • 获取依赖并更新的过程
  • 5.2 vuex插件

20-Axios的封装

• 1. Axios简介
  • 1.1 什么是Axios
  • 1.2 特性
• 2. Axios的使用和配置
  • 2.1 安装
  • 2.2 基本使用
    • 2.2.1 Get请求
    • 2.2.2 Post请求
    • 2.2.3 并发操作
  • 2.3 请求API配置
  • 2.4 请求设置
  • 2.5 响应数据Response
  • 2.6 拦截器Interceptors
• 3. 跨域
  • 3.1 ProxyTable
    • 1. 找到 config/index.js 文件中的 proxyTable:{} 将其修改
    • 2. 找到 config/dev.env.js 文件,配置BASE_URL
    • 3. 找到 config/prod.env.js 文件,配置BASE_URL
    • 4. 配置 axios 的基础域名
• 4. 封装
  • 4.1 条件准备
  • 4.2 axios封装(单域名)

综合练习-实现Tab-Bar

• 1. 实现Tab-Bar思路
• 2. 代码实现
• 3. 别名配置