Vue知识点（部分2）

• 一、自定义指令（directives）

  • 作用：操作dom；实例化第三方基于dom的插件

• directives:{
     "focus":{
     update(el,binding){
      //el指令所在节点
      //binding.value指令的值 
      }
    }
  }

  • <input v-focus="true">
  • update  更新就执行
  • bind 绑定一次
  • inserted  插入

• 二、filter（过滤 ，管道）

  • 例子

  • filters:{
       fix(val,len=2){
          return Number(val).toFixed(len)
       }
    }

    val是过滤前的值  return过滤后的值   len  fix过滤器的参数  作用：格式化数据

• 三、Vue选项

  • el 模板
  • data 数据
  • methods 方法
  • directives  指令
  • filters  过滤
  • watch  监听
  • computed  计算
  • props  属性
  • created  创建完毕

• 四、动画

  • 概念：两个状态形成过度
  • 进入，和离开（v-show  v-if）
  • transition（单个动画）
    • 属性
      • name 名称
      • enter-active-class=“fadeIn  animated”（指定进入class）
      • leave-active-class=“fadeIn  animated”（指定进入class）
    • 产生状态与类
      • .v-enter-active(进入整个状态)
        • v-enter：进入整个状态
        • v-enter-to：进入结束状态
      • .v-leave-active(离开整个状态)
        • v-leave：进入整个状态
        • v-leave-to：进入结束状态
  • transition-group(动画组)
    • 属性
      • tag(用什么标签包裹所有的动画组元素)
    • 产生状态与类
      • 通transition
      • v-move(正在移动中的元素)

• 五、组件

  • 作用
    • 1.组件时vue的一个重要的特点
    • 2.实现多人协作开发
    • 3.通过组件划分降低开发的难度
    • 4.实现复用，降低重复劳动
  • 组件解释
    • 组件就是定义好的一功能模块(建议多用props，少在组件中使用data（降低组件的耦合性，提高复用性）)
  • 定义使用
    • 1.定义  注意template有且只有一个根节点

      • const steeper ={
        template:`<span></span>`
        }

    • 2.在父组件中注册

      • components：{stepers：stepers}

    • 3.在组件的模板中使用<steper></steper>

  • 传参

    • 父传子
      • 父
        <modal :visible="visible">
      • 子
        props:{
        visible:{type:Boolean,default:false}
        ​}
      • 子使用
        注意: vue是单向数据流，父组件传递给子组件的props是只读（不能修改)this.visible
    • 子传父
      • 子
        this.$emit("update:visible",false)
      • 父（监听事件，修改值）
        <modal @update:visible="visible=$event">
  • 插槽
    • 插槽:组件的嵌套内容
    • 父
      <modal>
      <input />
      <button>确定</button>
      ​</modal>
    • 子组件模板中使用
      template: ‘<div><slot></slot></div>'
  • 具名插槽
  • 插槽作用域