Vue基础入门3——directives 自定义指令、filters 过滤（管道）、components 组件、动画，以及最后的vue的选项

首先要掌握的单词：

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 step