vue02—— 動畫、組件、組件之間的數據通訊

時間 2019-11-29

標籤 vue02 vue 動畫組件之間數據通訊简体版

原文原文鏈接

1、vue中使用動畫

文檔：https://cn.vuejs.org/v2/guide/transitions.htmlcss

1. Vue 中的過渡動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color:yellow;
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
            transform: translateX(200px);
        }
        .fade-enter-active,.fade-leave-active{
            transition: all 0.5s ease-in-out;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show=!show">切換</button>
    <transition name="fade">
        <div class="box" v-if="show">始於1886，可口可樂</div>
    </transition>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            show:true
        },
    });
</script>
</body>
</html>

2. 過渡動畫案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #app{
            width: 600px;
            margin: 50px auto;
        }
        li{
            width: 500px;
            height: 30px;
            border: 1px dashed #3fa435;
            margin-top: 10px;
        }
        li:hover{
            cursor: pointer;
            background-color: #ff7408;
            transition: all 0.8s ease;  /* hover 動畫效果  */
        }
        /*從這裏開始設置 vue 的動畫*/
        .hero-enter, .hero-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .hero-enter-active, .hero-leave-active{
            transition: all 0.5s ease;
        }
        .hero-move{
            transition: all 1s ease-in-out;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <label>姓名: <input type="text" v-model="name"></label>
        <label>絕招: <input type="text" v-model="unique_skill"></label>
        <button @click="add()">添加</button>
    </div>

    <transition-group tag="ul" name="hero">
        <li v-for="(list,index) in lists" @click="del(index)" :key="index">
            {{list.name}}：{{list.unique_skill}}
        </li>
    </transition-group>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'',
            unique_skill:'',
            lists:[
                {name:'鳴人',unique_skill:'螺旋丸'},
                {name:'卡卡西',unique_skill:'寫輪複製'},
                {name:'雛田',unique_skill:'八卦六十四掌'},
                {name:'阿童木',unique_skill:'拳頭'}
            ]
        },
        methods:{
            del(index){
                this.lists.splice(index,1)
            },
            add(){
                this.lists.push({name:this.name,unique_skill:this.unique_skill});
                this.name = '';
                this.unique_skill = '';
            }
        }
    })
</script>
</body>
</html>

3. 用第三方動畫庫 animate.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="app">
    <button @click="flag = !flag">切換</button>
    <br>
    <transition
        enter-active-class="bounceIn"
        leave-active-class="bounceIn"
        :duration="{enter:1000,leave:500}"
    >
        <img v-if="flag" src="img/1.jpg" alt="" class="animated">
    </transition>

    <h1 class="animated infinite bounce delay-2s">↑↑↑↑↑</h1>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:false,
        }
    })
</script>
</body>
</html>

其餘動畫操做方式，查看vue官網文檔,這裏先不記錄了。html

2、Vue 組件

如下演示的組件的各類建立方式。在工程化開發中.vue

1.全局 Vue 組件

全局組件，全部實例均可以使用app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <my-date></my-date>
    <my-date></my-date>
</div>

<div id="app2">
    <p>------------ app2 -----------</p>
     <my-date></my-date>
</div>


<script src="js/vue.js"></script>
<script>
    // 1. 組件構造器
    let Profile = Vue.extend({
        // 模板選項
        template:
            `
        <div>
            <span>你的生日是：</span><input type="date">
        </div>
        `
    });
    // 2. 註冊全局組件
    Vue.component('my-date',Profile);

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '噠噠噠'
        }
    });

    new Vue({
        el:'#app2'
    })
</script>
</body>
</html>

2. 局部 Vue 組件

局部組件在各自的實例裏面註冊。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <p>------------- app -------------</p>
    <my-date></my-date>
    <!-- my-color 這裏寫裏也沒用-->
    <my-color></my-color>
</div>

<div id="app1">
    <p>------------- app1 -------------</p>
    <my-color></my-color>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 組件構造器
    let Profile = Vue.extend({
        // 模板選項
        template: `
          <div>
              <span>日期：</span><input type="date">

          </div>
          `
    });

    let Profile1 = Vue.extend({
        // 模板選項
        template: `
          <div>
              <span>Color:</span><input type="color">

          </div>
          `
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        },
        components: {
            'my-date': Profile
        }
    });

    new Vue({
        el: '#app1',
        components: {
            'my-color': Profile1
        }
    })
</script>
</body>
</html>

3. 另外一種註冊組件的方式

全局組件：函數

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <my-date></my-date>
</div>

<div id="app1">
    <my-date></my-date>
</div>

<script src="js/vue.js"></script>
<script>
    //  註冊全局組件
    Vue.component('my-date', {
        template: `
          <div>
              <span>日期：</span><input type="date">
          </div>
          `
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
    });

    new Vue({
        el: '#app1',
    });
</script>
</body>
</html>

局部組件：動畫

<body>
<div id="app">
    <my-date></my-date>
    <my-color></my-color>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{},
        components:{
            'my-date':{
                template:`<div> <span>日期:</span> <input type="date"> </div>`
            },
            'my-color': {
                template: `
          <div>
              <span>Color:</span><input type="color">
          </div>
          `
            },
        }
    })
</script>
</body>

4.父子組件

<body>
<div id="app">
    <parent></parent>
    <!--<child></child>-->
</div>
<script src="js/vue.js"></script>
<script>
    // 1.構造子組件
    let child1 = Vue.extend({
        template:`<img src="img/1.jpg" width="200px">`
    });
    Vue.component('child',child1);

    let child2 = Vue.extend({
        template:`<p>child2......hello world!</p>`
    });

    // 2.構造父組件
    Vue.component('parent',{
        components:{
            'my-child1':child1,
            'my-child2':child2
        },
        template:
        `
        <div>
            <p>Father...一千零一晚上</p>
            <my-child1></my-child1>
            <my-child2></my-child2>
        </div>
        `
    });

    new Vue({
        el:'#app',
    });

</script>
</body>

5. vue 組件中的 template標籤

<body>
<div id="app">
    <g_box></g_box>
</div>
<template id="g_box">
    <div>
        <h5>hello man</h5>
        <img src="img/1.jpg" width="200px" alt="">
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    Vue.component('g_box',{
        template:'#g_box'
    });
    new Vue({
        el:'#app',

    })

</script>
</body>

6.Vue組件中的 script 標籤

這種方式不經常使用。ui

<body>
<div id="app">
    <g_div></g_div>
</div>
<script type="text/template" id="g_div">
    <div>
        <h5>hello Nurato!</h5>
        <img src="img/1.jpg" width="200px" alt="">
    </div>
</script>
<script src="js/vue.js"></script>
<script>
    Vue.component('g_div',{
       template:'#g_div'
    });

    new Vue({
        el:'#app'
    })
</script>
</body>

3、組件中間的數據通訊

1.Vue的組件數據傳遞-data

在這裏，data選項必須爲函數，必需要用函數返回的方式傳遞數據this

<body>
<div id="app">
    <g_div></g_div>
</div>
<template id="g_div">
    <div>
        <h5>{{msg}}</h5>
        <img src="img/1.jpg" width="200px" alt="">
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    Vue.component('g_div',{
        template:'#g_div',
        // 這裏data 只能經過函數返回的方式來，由於這樣申明的話，和new Vue 裏的data會互相污染
        // data:{
        //     msg:'hello man'
        // }
        data(){
            return {msg:'hello man'}
        }

    });

    new Vue({
        el:'#app',
        data:{

        }
    })
</script>
</body>

2.Vue的組件之間的通訊

<body>
<div id="app">
    <g_box msg="hello Nurato" imgSrc="img/1.jpg"></g_box>
</div>
<template id="g_box">
    <div>
        <h5>{{msg}}</h5>
        <img :src="imgsrc" width="200px" alt="">
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    // 1 建立組件
    Vue.component('g_box',{
        template:'#g_box',
        props:['msg','imgsrc']
    });

    // 2 建立實例
    new Vue({
        el:'#app',
        data:{
            msg:''
        }
    })
</script>
</body>

3.Vue的組件之間的通訊-多層

<div id="app">
    <!-- 1. 這種不帶 ： 號的，能夠直接填值，可是用不了 實例中 data 裏的數據  -->
    <!--<my-parent imgsrc="img/1.jpg" img_title="Nurato"></my-parent>-->

    <!-- 2. 圖片，imgsrc 若是是用 實例中的data,必須是用加 ： 號的方式  -->
    <my-parent :img_title="title" :imgsrc="img"></my-parent>

</div>
<!-- 子組件 1 -->
<template id="my_img">
    <img :src="imgsrc"width="200px"  alt="">
</template>
<!-- 子組件 2 -->
<template id="my_title">
    <h5>{{title}}</h5>
</template>

<!-- 父級組件 -->
<div id="my_parent">
    <div>
        <child1 :imgsrc="imgsrc"></child1>
        <child2 :title="img_title"></child2>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    // 1.子組件實例
    let child1 = Vue.extend({
        template:'#my_img',
        props:['imgsrc']
    });

    let child2 = Vue.extend({
        template:'#my_title',
        props:['title']
    });

    // 父組件
    Vue.component('my-parent',{
        props:['imgsrc','img_title'],
        components:{
            'child1':child1,
            'child2':child2
        },
        template:'#my_parent'
    });

    new Vue({
        el:'#app',
        data:{
            img:'img/1.jpg',
            title:'2.噠噠噠'
        }
    })


</script>
</body>