zoukankan      html  css  js  c++  java
  • 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不会
    
  • 相关阅读:
    MySQL练习题
    InnoDB存储引擎+显示数据库引擎
    EMP+DEPT+SALGRADE 表的基本操作2
    EMP+DEPT+SALGRADE 表的基本操作1
    Git的使用
    JavaScript动画实例:旋转的正三角形
    JavaScript动画实例:曲线的绘制
    JavaScript动画实例:螺旋线
    JavaScript图形实例:阿基米德螺线
    JavaScript图形实例:平面镶嵌图案
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/14757132.html
Copyright © 2011-2022 走看看