Vue學習—組件的學習

時間 2019-12-11

標籤 vue 學習組件简体版

原文原文鏈接

一、什麼是組件？

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。html

定義組件通常有如下三種方式

組件形式一：使用script標籤

示例代碼：vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組件的學習</title>
</head>
<style>
    .box{
        border: 3px solid silver;
        padding: 0.3em 1em;
        border-radius: 3px;
    }
    /*選擇第一個以外的
      :not(:first-child):not(:last-child) 選擇非第一個和最後一個
    */
    .box:not(:first-child){margin-top: 10px;}
    .box h2{margin: 0.2em 0;}
</style>
<body>
<div id="app">
    <h2 style="text-align: center">{{title}}</h2>
    <my-box id="0" text="讓世界聽見你的聲音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>
    <my-box id="1" text="拉鉤,夢想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>
    <my-box id="2" text="下班後多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>
</div>
<script type="text/x-template" id="template">
    <div class="box" @click='getinfo(id)'>
        <img width="120" v-bind:src="imgurl"/>
        <h2>{{text}}</h2>
    </div>
</script>
<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
    Vue.component("my-box",{
        template:"#template",
        props:[
            "id",
            "text",
            "imgurl"
        ],
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:'#app',
        data:{
            title:"組件學習",
        },

    })
</script>
</body>
</html>

運行效果：瀏覽器

注意：使用<script>標籤時，type指定爲text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標籤內定義的內容。app

組件形式二：使用template標籤

示例代碼：ide

一、學習

<div id="app">
    <h2 style="text-align: center">{{title}}</h2>
    <my-box id="0" text="讓世界聽見你的聲音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>
    <my-box id="1" text="拉鉤,夢想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>
    <my-box id="2" text="下班後多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>
</div>
<template id="template">
    <div class="box" @click='getinfo(id)'>
        <img width="120" v-bind:src="imgurl"/>
        <h2>{{text}}</h2>
    </div>
</template>

<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
    Vue.component("my-box",{
        template:"#template",
        props:[
            "id",
            "text",
            "imgurl"
        ],
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:'#app',
        data:{
            title:"組件學習",
        },

    })
</script>

二、ui

<div id="app">
    <h2 style="text-align: center">{{title}}</h2>
    <my-box id="0" text="很是精美的人護手霜" imgurl="./images/1.png"></my-box>
    <my-box id="1" text="很是精美的洗面奶" imgurl="./images/2.png"></my-box>
    <my-box id="2" text="很是精美的洗衣粉" :imgurl="errorurl"></my-box>
</div>
<script>
    //建立組件構造器
    let probox = Vue.extend({
        props:[
            "id",
            "text",
            "imgurl"
        ],
        template:`<div class="box" @click='getinfo(id)'>
                        <img width="60" v-bind:src="imgurl"/>
                        <h2>{{text}}</h2>
                        </div>`,
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:'組件的學習',
            errorurl:"./images/3.png"
        },
        components:{
            "my-box":probox,
        },
    })
</script>