1. vue 的基础使用和高级特性

vue 语法基础

1. 插值、表达式 2.指令、动态属性 3. v-html: 会有xss风险，会覆盖子组件

4. computed

5. watch

6. class 和 style

7. 条件渲染 v-if v-show(display:none)

8. 循环（列表）渲染

// v-for 和 v-if 不建议放在一起，会在循环中重复判断

9. 事件
   -> event事件，自定义参数
   -> 事件修饰符，按键修饰符
   -> 观察事件被绑定到哪里？

10. 事件修饰符

    
    
    image.png

11. 按键修饰符

    
    
    image.png

12. 表单
    v-model
    常见的表单项 textarea checkbox radio select
    修饰符 lazy number trim

父子组件如何通讯-props 和 emit off

14. 组件生命周期
    单个组件

 挂载 mounted 
 更新 updated
 销毁 destoryed
created 之前 new Vue 的实例还没有生成，只存在于 js 内存模型中
mounted 组件还没有渲染在页面上，网页绘制完成
beforeDestory 里面需要解除绑定，销毁子组件以及事件监听器

父子组件生命周期

父组件 created
子组件 created
子组件 mounted 
父组件 mounted

父组件 beforeUpdated
子组件 beforeUpdated
子组件 updated
父组件 updated

vue 高级特性

1. 自定义 v-model

2. $nextTick refs （组件更新之后如何获取最新DOM）

  vue是异步渲染
  data 改变之后，DOM不会立刻渲染
  $nextTick 会在 DOM 渲染之后被触发，以获取最新的DOM节点

3. slot 父组件想向子组件中插入一部分内容

        
        
        
// 基本使用
// SlotDemo 



// 作用域插槽
// ScopedSlotDemo 

// 具名插槽

image.png

4. 异步组件

  根据数据，动态渲染的场景，即组件类型不确定
语法： :is="xxx"  xxx 组件的名字

5. 异步组件

   * import() 函数
   * 按需加载，异步加载大组件
 
 
 show form demo 
 export default {
     components: {
        FormDemo: () => import('../BaseUse/FormDemo')
     }
  }

6. keep-alive （vue 如何缓存组件）适用场景：需要频繁切换的组件

* activated
    
        
        
        
    

7. mixin （vue组件代码抽取，多个组件有相同的逻辑，抽离出来）

* 变量来源不明确；
* mixin抽离的代码 data 里面的命名变量不能相同，会存在覆盖的问题；命名冲突；
* mixin 和 组件可能出现多对多的关系，复杂度比较高；