vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject

vue2

    • 一、学习目标
      • 1.组件的三大组成部分(结构/样式/逻辑)
      • 2.组件通信
      • 3.综合案例:小黑记事本(组件版)
      • 4.进阶语法
    • 二、scoped解决样式冲突
      • **1.默认情况**:
      • 2.代码演示
      • 3.scoped原理
      • 4.总结
    • 三、data必须是一个函数
      • 1、data为什么要写成函数
      • 2.代码演示
      • 3.总结
    • 四、组件通信
      • 1.什么是组件通信?
      • 2.组件之间如何通信
      • 3.组件关系分类
      • 4.通信解决方案
      • 5.父子通信流程
      • 6.父向子通信代码示例
      • 7.子向父通信代码示例
      • 8.总结
    • 五、什么是props
      • 1.Props 定义
      • 2.Props 作用
      • 3.特点
    • 六、props校验
      • 1.思考
      • 2.作用
      • 3.语法
    • 七、props校验完整写法
      • 1.语法
      • 2.代码实例
      • 3.注意
    • 八、props&data、单向数据流
      • 1.共同点
      • 2.区别
      • 3.单向数据流:
      • 4.代码演示
      • 5.口诀
    • 九、综合案例-组件拆分
      • 1.需求说明
      • 2.拆分基础组件
    • 十、综合案例-列表渲染
    • 十一、综合案例-添加功能
    • 十二、综合案例-删除功能
    • 十三、综合案例-底部功能及持久化存储
    • 十四、非父子通信-event bus 事件总线
      • 1.作用
      • 2.步骤
      • 4.总结
    • 十五、非父子通信-provide&inject
      • 1.作用
      • 2.场景
      • 3.语法
      • 4.注意
    • 十六、v-model原理
      • 1.原理:
      • 2.作用:
      • 3.注意
      • 4.v-model使用在其他表单元素上的原理
    • 十七、表单类组件封装
      • 1.需求目标
    • 十八、v-model简化代码
      • 1.目标:
      • 2.如何简化:
    • 十九、.sync修饰符
      • 1.作用
      • 2.场景
      • 3.本质
      • 4.语法
      • 5..总结
    • 二十、ref和$refs
      • 1.作用
      • 2.特点:
      • 3.语法
      • 4.注意
    • 二十一、异步更新 & $nextTick
      • 1.需求
      • 2.问题
      • 3.解决方案

一、学习目标

1.组件的三大组成部分(结构/样式/逻辑)

​ scoped解决样式冲突/data是一个函数

2.组件通信

  1. 组件通信语法
  2. 父传子
  3. 子传父
  4. 非父子通信(扩展)

3.综合案例:小黑记事本(组件版)

  1. 拆分组件
  2. 列表渲染
  3. 数据添加
  4. 数据删除
  5. 列表统计
  6. 清空
  7. 持久化

4.进阶语法

  1. v-model原理
  2. v-model应用于组件
  3. sync修饰符
  4. ref和$refs
  5. $nextTick

二、scoped解决样式冲突

vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject_第1张图片

1.默认情况

写在组件中的样式会

你可能感兴趣的:(vue2和vue3学习,vue.js,javascript,前端)