vue系列--【animate.css、过滤器、组件基础】

1.动画

场景：

1. v-if 
2. v-show
3.动态组件
4.路由

使用：

进来之前 enter
进来过程 enter-active
进来完成 enter-to
离开之前 leave
离开过程 leave-active
离开完成 leave-to

<transition name="aa" >
  <div class="box" v-show="show"></div>
</transition>

animate.css

0.官网：https://animate.style/

1.下载

npm i animate.css 

2.引入

 <link rel="stylesheet" href="./animate.css">

3.使用

<transition 
            leave-active-class="animate__animated animate__fadeOutTopLeft"
            enter-active-class="animate__animated animate__backInRight"
            >
  <div class="box" v-show="show"></div>
</transition>

4.注意：

只写进来，不写离开。

2.过滤器

作用：

转换数据

使用：

| 管道符

语法：

// 全局过滤器：所有的Vue实例都可以使用该过滤器
Vue.filter("过滤器名称",(过滤对象)=>{
  return "你要结果"
})

new Vue({
            el:"#app",
            data:{
                tel:"15739393939",
                price:20,
                allPrice:30.9
            },
            //局部过滤器：只有当前Vue实例才能用该过滤器
            filters:{
                过滤器名称(过滤对象){
                    return "你要结果"
                },
                /*
                transPrice(price){
                    return price.toFixed(2)
                }*/
            },
})

推荐使用全局

3.组件基础

1.定义：

可复用的vue实例。

2.注册：

// 全局注册:所有的vue实例都可以用
Vue.component("组件名称",{
  //配置项
})
new Vue({
  el:"#app",
  data:{},
  // 局部注册：只有当前vue实例可以使用该组件
  components: {
    "组件名称":{
       //配置项
    }
  }
})

3.命名：

1. 不能以现有标签命名，eg:div span ...
2. 也不能以已经存在的标签的大写命名 eg:DIV SPan
3. 如果名字中间有大写，调用需要变成 -小写 烤串写法
4. 建议取名字中间包含大写,方便调用

4.template

<template id="two">
        <div>
            <h3>this is two </h3>
            <div>this is two content</div>
        </div>
    </template>
    
    <script>
        new Vue({
            el: "#app",
            data: {},
            components: {
                // Component template should contain exactly one root element
                //1.template只能有1个根节点
                vOne: {
                    template: "<div><h3>this is one</h3><div>this is one content</div></div>"
                },
                // 2.借助templat标签来书写template选项
                vTwo:{
                    template:"#two"
                }
            }
        })
    </script>

5.data

1.data需要是一个返回对象的函数
2.一个组件只能使用自己的data、methods、watch、computed filters、components 。。。
3.组件不能直接使用父组件的数据
4.组件只能使用自己的子组件和公共组件
5.每一次调用组件，都会有一个新的vue实例产生
6. v-if 在组件上的切换，会引起该组件生命周期的重新执行, v-show不会