vue-learning：0

Vue-learning

vue.js学习路径

Vue的API地图

点击查看vue的API地图

视图层

点击可直接到达详情页面
指令

• {{ }} / v-html
• v-if / v-else / v-else-if
• v-show
• v-for
• v-bind / :
• v-on / @
• v-model

样式

• v-bind:class
• v-bind:style

特殊特性

• key
• ref

过渡动画

• css过渡：<transition name="">
• js过渡： <transition v-on:method

模板形式

• HTML
• template
• render方法：createElement
• render方法：JSX

逻辑层

通用配置选项option

• data
• computed
• methods
• watch
• filters
• mixins
• directives

生命周期钩子函数

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destory
• activated (keep-alive)
• deactivated (keep-alive)

组件 Component

1. 组件的概念

2. 组件的构建和注册

   • 构建：com = Vue.extend(option)
   • 注册：Vue.component('my-com', com) / vm.components: {'my-com': com}
   • 语法糖： Vue.component('my-com',option) vm.components('my-com': option)
   • 组件命名规范

3. 组件三大API： prop / event / slot
   prop

   • 字符串数组形式： props: ['prop1', 'prop2', ...]
   • 对象形式： type / required / defalut / validator
   • prop的命名规范
   • 动态prop（除字符串外，其它类型传入都需要使用动态prop，即v-bind绑定）
   • 单向数据流
   • 非prop特性: inheritAttr: false; / $attrs

   event

   • v-on / $on 监听事件
   • $once 一次性事件
   • $emit 触发事件
   • $off 卸载事件监听
   • $listeners v-on绑定监听器集合（除原生监听事件）
   • .native 原生事件修饰符
   • .sync 双向绑定修饰符
   • model 属性

   slot

   • 普通插槽

     <slot></slot>
     

   • 插槽提供默认值

     <slot>default content</slot>
     

   • 具名插槽

     <slot name="someName"></slot>
     <!-- 组件调用 -->
     <my-com>
         <template v-slot:somName></template>
     <my-com>
     

   • 作用域插槽

     <slot :prop="value"></slot>
     <!--组件调用 -->
     <my-com>
         <template v-slot='childValue'>{{ cilidValue.value}}</template>
     </my-com>
     

   • 独占默认插槽的写法

     <some-component v-slot="childValue"> {{ childValue.value }}</some-component>
     <some-component v-slot:default="childValue"> {{ childValue.value }}</some-component>
     

   • 解构插槽prop

     <my-com v-slot="{value}">{{ value }}</my-com>
     <!-- 重命名 -->
     <my-com v-slot="{value: otherName}">{{ otherName }}</my-com>
     <!-- 重命名并提供默认值 -->
     <my-com v-slot="{value: {otherName: defaultValue}}">{{ otherName }}</my-com> 
     

   • 动态插槽名

     <my-com>
         <template v-slot:[dynamicSlotName]></template>
     </my-com>
     

   • v-slot 的简写 #

     <my-com>
         <template #:somName></template>
     <my-com>
     

   • 模板编译作用域 和 插槽作用域

4. 组件实例的调用

   • ref
   • $root
   • $parent
   • $children

5. 组件间的通信

   • 父子组件通信 prop / $emit
   • 三层嵌套组件 $attrs / $liteners
   • 后代组件通信 provide / inject
   • 组件实例引用 $root / $parent / $children / $refs
   • 事件总线 const Bus = new Vue()
   • 状态管理器 Vuex

6. 动态组件is

7. 异步组件工厂函数

8. 函数式组件functional

9. 内置组件transiton / keep-alive

10. 其它

    • 组件的递归调用
    • 组件的循环引用
    • v-once创建静态组件

路由 Vue-router

1. 前端路由历史
   1. 服务端渲染(SSR:server side render)
   2. 客户端路由(client side routing)
2. 前端路由实现原理
   1. hash模式: location.hash 和 hashChange事件
   2. history模式： history 和 popstate事件
3. vue-router
   1. const router = new VueRouter(option)中的选项对象option
   2. 路由器实例对象router
   3. 路由对象route
   4. router-link标签的特性
   5. router-view标签的特性
4. 路由传参的5种方式
   1.路由动态参数: '/user/:userId'和params

   const route = {path: '/user/:userId'}
   this.$router.push({path:`/user/${userId}`})
   this.$route.params.userId
   

   2.命名路由传参,使用name和params

   const route = {name:'home',...}
   this.$router.push({name:'Login',params:{id:'leelei'}})
   this.$route.params.id
   

   3.查询参数传参，使用path和query

   this.$router.push({path:'/login',query:{id:'leelei'})
   this.$route.query.id
   

   4.prop形式：布尔/对象/函数

   const route = [{prop:true, ...}]
   const route = [{prop: {someProp:'someValue'}] 
   const routes =[{props: (route) => ({ query: route.query.q }),...}]
   

   5. meta元信息定义数据

   // 定义路由时，定义元信息
   const routes = [
   {meta: {someData:'someData'},... },
   // 获取数据
   this.$route.meta.someData
   

5. 从路由中获取组件实例

   const matchedComponents: Array<Component> = this.$router.getMatchedComponents(location?)
   

状态管理 Vuex

1. 状态管理的概念
2. vuex基本使用
3. Vuex对象
4. option选项
5. store实例对象的属性: state, getters
6. store实例对象的方法
   1. commit / dispatch
   2. 注册和卸载plugin的方法
   3. 注册和卸载Module的方法
   4. vuex的辅助函数: mapState / mapGetters / mapMutaions / mapActions
7. vuex的项目结构组织

单元测试 vue-test-utils

项目构建vue-cli

进阶内容

• 响应式原理
• 虚拟DOM
• 模板编译原理
• Vue API和vm API