首先要掌握的单词：

handler 处理器，deep 深度，config 配置，global 全局，components 组件，props 属性，emit 发送，transition 过滤，group 组

目录

十三、directives 自定义指令

十四、过滤（管道）filters

 十五、components 组件

15.1作用：

15.2组件解释

15.3定义与使用

1.定义

2.在父组件中注册

3.在组件的模板中使用

15.4传参

1.父传子

2.子传父

 15.5插槽

十六、动画

v-show

v-if

transition 单个动画元素

enter-active-class="fadeln animated"指定进入class

leave-active-class=""指定离开class

transition-group 动画组

十七、Vue的选项

十三、directives 自定义指令

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

directives:{
  "focus":{
    update(el,binding){
      // el 指令所在节点
      // binding.value  指令的值
    }
  }
}
// update  更新就执行
// bind  绑定一次
// inserted  插入

十四、过滤（管道）filters

作用：格式化数据

<div>{{3.1415926|fix}}</div>
<div>{{3.1415926|fix(4)}}</div>

<script>
filters:{
    fix(val,len=2){
        return Number(val).toFixed(len)
   }
 }
// val 是过滤前的值
// return 过滤后的值
// len fix 过滤器的参数
</script>
 

 十五、components 组件

15.1作用：

1.组件是vue的一个重要的特点
2.实现多人协作开发
3.通过组件划分降低开发的难度
4.实现服用，降低重复劳动

15.2组件解释

组件就是定义好的一个功能模块
建议：对用props，少在组件中使用data（降低组件的耦合性，）

template 有且只有一个根节点

15.3定义与使用

1.定义

const steper={
    template:`<div></div>`
}

2.在父组件中注册

new Vue({
    el:"",
    components:{ steper:steper }
})

3.在组件的模板中使用

<steper></steper>

15.4传参

1.父传子

父

<model :visible="visible">

子

props : {
  visible : { 
    type : Boolen, 
    default : false
  }
}

子使用：this.visible
注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）的

2.子传父

子：

this.$emit("update:visivle",false)

父：

<model @update:visible="visible=$event">

 15.5插槽

组件的嵌套内容

父：

<model>
  <input />
  <button><button/>
</model>

子组件模板中使用：

template:`<div><slot></slot></div>`

十六、动画

v-show

只是简单地切换元素的 CSS property display。

v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

进入和离开，两个状态形成过渡

transition 单个动画元素

属 性：

name 名称

enter-active-class="fadeln animated"
指定进入class

leave-active-class=""
指定离开class

产生状态与类：

v-enter-active
进入整个状态

• v-enter
  进入开始状态
• v-enter-to
  进入结束状态

v-leave-active

• v-leave
• v-leave-to

transition-group 动画组

属性：tag
用什么标签包裹所有的动画组元素

产生状态与类

• 通 transition
• v-move
  正在移动中的元素

十七、Vue的选项

1. el 元素
2. data 数据
3. methods 方法
4. watch 监听
5. computed计算
6. directives 指令
7. filters 过滤
8. props 属性
9. created 创建完毕
10. template 模板
11. components 组件