一、自定义指令（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>'
• 具名插槽
• 插槽作用域