Vue过滤器、自定义命令、动画、组件、组件插槽

1. Vue过滤器

1.1 使用方式

    Vue.filter('过滤器的名称', function(str) {
        return str
    })

1.2 使用场景

• 插值表达式

• 属性绑定

1.3 使用类型

• 全局过滤器

  //data  要过滤的数据
  //arg1  要过滤的某个字段
  //arg2  要替换的字段
  Vue.filter('过滤器名',(str,arg1,arg2)=>{
    return str.replace(arg1,arg2)
  })

• 过滤器

  //dataFmt  过滤器名
  //data  要过滤的数据
  //arg1  要过滤的某个字段
  //arg2  要替换的字段
  new Vue({
      filters: {
          dataFmt(data, arg1, arg2) {
              return data.replace(arg1, arg2)
          }
      }
  })

1.4 全局过滤器和私有过滤器的区别

• 全局过滤器可以在任意的实例中使用
• 私有过滤器只能使用在自己的实例中

2. Vue自定义指令

2.1 使用方式

  Vue.directive('指令的名称'，{})

2.2 使用场景

• 直接使用在标签上

<!-- color: 指令的名称 -->
  <div v-color="'red'"></div>

2.3 使用类型

• 全局指令

Vue.directive('color',{
  //el 是绑定的指令的dom元素
  //binding 是一个对象，binding.value可以获取到指令的值
  bind(el,binding){
    //一般用于操作css样式,在内存中使用
  },
  inserted(){
    //一般用户操作dom,在dom渲染完毕时执行
  },
  updated(){
    //多次的更新操作
  }

})

• 私有指令

  new Vue({
    directives:{
      //简化写法，自动执行了bind和updated钩子函数
      color(el,binding){
        el.style.color = binding.value
      },
      focus:{}
      //操作dom时使用inserted
    }
  })

3.Vue动画

3.1 原生动画

1. 设置一个可切换的元素
```html
<button @click="isToggle = !isToggle">显示隐藏</button>
```
2. 使用transition包含要动画的元素
```html
  <transition>
    <div v-show='isToggle'>
      显示隐藏
    </div>
  </transition>
```

3. 设置动画的样式

```css

/* 起点和终点的状态 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(300px);
}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}


```

3.2 第三方动画

1. 引入animate官方样式库

2. 设置一个可切换的元素
```html
<button @click="isToggle = !isToggle">显示隐藏</button>
```

3. 使用transition包含要动画的元素，并设置进入和离开的动画

```html
  <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight" duration="500">
    <!-- 分开设置时间  :duration="{enter:500,leave:300}" -->
    <div v-show="isToggle" class="animated">
      <!-- 给动画的元素设置animated类名 -->
    </div>
  </transition>

```

3.3 列表动画

1. 设置一个可切换的元素

  <button @click="isToggle = !isToggle">显示隐藏</button>

2. 使用transiton-group包含要动画的元素

  <transition-group appear tag="ul">
    <li v-for="count in 5">
      {{count}}
    </li>
  </transition-group>

3. 设置动画的样式

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(300px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }

  .v-leave-active {
    position: absolute;
  }

  /* 后期的动画操作 */
  .v-move {
    transition: all .5s ease;
  }

3.4 半场动画

1. 设置一个可切换的元素
   <button @click=“isToggle = !isToggle”>显示隐藏
2. 使用transition包含要动画的元素

  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="after">
    <div v-show="isToggle">
    </div>
  <transition>

3. 手动绑定动画的钩子函数

  new Vue({
    el:"#app",
    data:{
      isToggle:false
    }
    methods:{
      beforeEnter(){
        //设置起点
      },
      enter(el,done){
        //设置终点

        //done,强制刷新,是after的回调函数
      },
      after(){
        //手动切换
      }
    }
  })

4. Vue组件

4.1 组件的使用方式

1. 定义组件

```js
  const Login = {
    template:'#template'
  }
```

2. 注册组件

• 全局组件注册

  //Vue.component('组件名称',定义组件的返回值)
  Vue.component('login',Login)
  

• 私有组件注册

  new Vue({
    components:{
      Login
    }
  })
  
  

3. 渲染组件

• 以组件的名称作为html标签使用

    <div id="app">
      <login></login>
    </div>
  

• 组件模板分离

  <div id="app">
    <!-- 3. 渲染组件 把组件名称当做html标签使用 -->
    <my-login></my-login>
  </div>
  
  <template id="template">
    <!-- 模板中有且只有一个根元素，一般用div -->
    <div>
      <h1>login组件</h1>
      <div class="des">
        描述
      </div>
    </div>
  </template>
  
  

• 以component作为标签使用，一般用于组件的切换

    <component :is="componentId"></component>

4.2 组件插槽

+ 组件插槽可以让我们在组件之间定义自己的布局，没有开启插槽的时候是不可以定义

1. 匿名插槽
```html
<div id="app">
  <login>
    <h1>login 组件</h1>
  <login>
</div>

```
```js
//定义组件
const Login = {
  template:`
    <div>
      <slot>login 组件</slot>
    </div>
  `
}

new Vue({
  el:"#app",
  commponents:{
    Login
  }
})
```

2. 具名插槽

```html
<div id="app">
  <login>
    <h1 slot="login">login</h1>
  <login>
</div>

```
```js
//定义组件
const Login = {
  template:`
    <div>
      <slot name="login">login 组件</slot>
    </div>
  `
}

new Vue({
  el:"#app",
  commponents:{
    Login
  }
})
```


3. 作用域插槽

```html
  <div id="app">
    <login>
      <h1 slot-scope="scope">{{scope.info}}</h1>
    <login>
  </div>

  ```
  ```js
  //定义组件
  const Login = {
    template:`
      <div>
        <slot :info="'login 组件'">login 组件</slot>
      </div>
    `
    //1. 在slot上使用v-bind属性绑定的方式传递数据
    //2. 在渲染的组件上使用 slot-scope 接收传递过来的数据
  }

  new Vue({
    el:"#app",
    commponents:{
      Login
    }
  })
```