天天看點
傳回

vue基礎：元件、過渡、動畫

動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具：

  • 在 CSS 過渡和動畫中自動應用 class
  • 可以配合使用第三方 CSS 動畫庫，如 Animate.css
  • 在過渡鈎子函數中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

而在vue中，Vue 提供了 transition 的封裝元件，在下列情形中，可以給任何元素群組件添加進入/離開過渡

  • 條件渲染 (使用 v-if)
  • 條件展示 (使用 v-show)
  • 動态元件
  • 元件根節點 
<style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition name='fade'>
            <div v-if='show'>Hello VueJS</div>
        </transition>
        <button @click='handleClick'>切換</button>
    </div>
    <script>
        var vm= new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods: {
                handleClick(){
                    this.show=(this.show==true?false:true);
                }
            },
        })
    </script>

自定義過渡類名

可以通過以下 attribute 來自定義過渡類名：

優先級高于普通類名

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+) 
<div id="app">
        <transition name='fade' 
        enter-active-class='animated swing'
        leave-active-class='animated shake'
        >
        <div v-if='show'>~~~~~~~~~~~~~</div>

        </transition>
        <button @click='dianji'>點選</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                dianji(){
                    this.show=(this.show==true?false:true)
                }
            }
        })

清單過渡

使用 元件

元件

元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重用的代碼。

全局元件

文法格式：Vue.component(name,outions);第一個參數為元件名字，第二個為配置選項。配置完成後可以用調用元件

注意如果元件名稱使用的是駝峰命名法，那麼在引用組建的時候，兩個單詞用-連接配接。

<div id="app">
    <zujian></zujian>
    <runoob></runoob>
    </div>
   <script>
       //Vue.component(tagName, options)  第一個參數為元件名 第二個為配置選項
       //注冊元件
       Vue.component('zujian',{
           template:'<h1>全局自定義元件</h1>',
           //元件中的data是一個具有傳回值的函數, 并且傳回值隻能是對象
           data:function(){
           return{}
           }
       })
       Vue.component('runoob',{
           template:'<p>jiayou</p>'
       })

       //建立根執行個體
        var vm=new Vue({
                   el:"#app",

    })
   </script>

局部元件

與全局元件不同的是，局部元件隻能在父模闆可用

<body>
    <div id="app">
            <runoob></runoob>
            <zujian></zujian>
    </div>
    <script>
        //模闆對象
        var child={
            template:'<h1>這是局部元件</h1>'
        }
        var duxiang={
            template:'<p>心态</p>'
        }
           new Vue({
               el:'#app',
               data:{},
               methods:{},
               components:{
                   //隻能在父模闆可用runoob
                   'runoob':child,  //元件名稱：模闆對象名稱
                   'zujian':duxiang
               }
           })
    </script>

外部

<div id="app">
    //調用元件
         <mycom></mycom>  
    </div>

    <!-- 定義元件html結構 -->
    <template id="tmpl">
         <div>
             <h1>通過template定義的外部元件</h1>
             
         </div>
    </template> 
   
    <script>
    //建立元件
     var yingyong={
        template:'#tmpl'
      }
        new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
               'mycom':yingyong
            }
        })
    </script>

登入注冊案例應用

建立兩個a标簽(登入、注冊按鈕，使用@click指令)=>建立元件模闆對象=>建立元件=>應用（使用v-if v-else）

<div id="app">
        <a href="#" @click.prevent='type="login"'>登入</a>
        <a href="#"  @click.prevent='type="login2"'>注冊</a>
         <transition mode="out-in"> <!--//解決第一個沒有執行完 第二個 就執行問題 -->
             <!-- <login v-if='flag'></login>
             <login2 v-else='flag'></login2> -->
             <component :is='type'></component><!--  通過is來決定顯示哪個元件 -->
        </transition>
     
    </div>
    <template id="tmp1">
        <h2>登入</h2>
    </template>
    <template id="tmp2">
        <h2>注冊</h2>
    </template>
    <script>
        Vue.component('login',{
            template:'#tmp1'
        })
        Vue.component('login2',{
            template:'#tmp2'
        })
        new Vue({
            el:'#app',
            data:{
                flag:true,
                type:''
            }
        })
        
    </script>

父元件=>子元件傳資料props:[ ]

使用props方法，将傳遞過來的資料放在數組中，之後在傳遞到子元件中。元件中的所有props 中的資料都是通過父元件傳遞給子元件的props 中的資料 是隻讀的無法重新指派

<div id="app">
        <temp1 :parentmsg='msg'></temp1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'父元件内容'
            },
            methods:{},
            components:{
                temp1:{
                    template:'<h2>子元件======={{parentmsg}}</h2>',
                    props:['parentmsg']  //把父元件 傳遞過的屬性，現在數組中存起來 才能使用
                }
            }
        })

父元件向子元件傳遞方法

1.在子元件定義一個key值（事件名稱），将父元件方法傳遞進去

2.子元件接收 this.$emit(事件名稱)

<div id="app">
        <temp1 :parentmsg='msg' @fun='show'></temp1>
    </div>
    <template id="temp1">
        <div>
            <h3 @click='btn'>這是子元件的内容========{{parentmsg}}<h3>
        </div>
    </template>
    <script>
        var temp1={
            template:'#temp1',
            props:['parentmsg'],
            methods: {
                btn(){
                    // 在子元件 中接收 this.$emit('') 
                    this.$emit('fun');
                }
            },
        }
        new Vue({
            el:'#app',
            data:{
                msg:'父元件内容'
            },
           
            methods:{
                 show(){
                  console.log('用了父元件的show方法')   
                }
            },
            components:{
               temp1
            }
        })

子元件向父元件傳遞資料

<div id="app">
         <input type="button" value="點選" @click='show'>
      <temp @fun='show'></temp>
    <p>{{datamsg}}</p>
    </div>
    <template id="temp1">
        <h2 @click='btn'>子元件向父元件</h2>
    </template>
    <script >
        //父元素往子元素傳遞方法，通過this.$emit
        var temp={
            template:'#temp1',
            data(){
                return{
                    msg:{
                        name:'zhangsna',
                        age:6
                    }
                }
            },
            methods:{
                btn(){
                    this.$emit('fun',this.msg)
                }
            }
        }
        new Vue({
            el:'#app',
            data:{datamsg:null},
            methods:{
                show(data){
                    this.datamsg=data
                    console.log('這是父元件')
                }
            },
            components:{
                temp
            }
        })
元件 過渡 vue
上一篇: Qt mysql操作及注意事項1.打開資料庫2.插入資料3.讀取資料
下一篇: 人智導（十三）：有指導學習（Ⅲ）人智導（十三）：有指導學習（Ⅲ）

繼續閱讀