Vue组件与动画

• 组件
  • 使用
    • 1.组件时vue的一个重要特点
    • 2.实现多人协作开发
    • 3.通过组件划分降低开发的难度
    • 4.实现复用，降低重复劳动
  • 组件解释
    • 组件就是定义好的一块功能模块，多用props，少在组件中使用data（降低的组件的耦合性）
  • 定义与使用
    • 1.定义（注意：template有且只有一个根节点）
      const steper={
      complate：·<span></span>·
      ​}
    • 2.在父组件中注册
      components:{ steper:steper }
    • 3.在组件的模板中使用
      <steper></steper>
  • 传参
    • 父传子
      • 父
        <modal :visible="visible">
      • 子
        props:{
        visible:{ type:Blooean,default:false}
        ​}
      • 子使用
        注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）
        this.visible

      • 

    • 子传父
      • 子
        this.$emit("update:visible",false)
      • 父(监听事件，修改值)
        <modal @update:visible="visible=$event">

      • 

  • 插槽
    • 组件的嵌套内容
    • 父
      <modal>
      <input>
      ​<button>确定</button>
      </modal>
    • 子组件 模板中使用
      template:` <div>
      <slot></solt>
      ​</div>`
• 动画
  • 两个状态形成过渡
    进入和离开
    v-show v-if
  • transition
    单个动画元素
    • 属性
      • name 名称
      • enter-active-class=“fadeIn animated”
        指定进入class
      • leave-active-class="fadeOut animated"
        指定离开class
    • 产生状态与类
      • v-enter-active
        进入整个状态
        • v-enter 进入开始状态
        • v-enter-to 进入结束状态
      • v-leave-active
        离开整个状态
        • v-leave 离开开始状态
        • v-leave-to 离开结束状态
  • transition-group
    动画组
    • 属性
      • tag 用什么标签包裹所有的动画元素
    • 产生状态与类
      • transition 
      • v-move 正在移动中的元素