iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 6

(第六天)自我學習 - Vue Component

使用Vue Component

Component 在管理方面變得好方便!現在可以把一個頁面切成一個一個的 Component ,這樣有什麼好處呢?把畫面拆解下來成為一個一個的元件之後很容易去維護。


簡單的介紹 Component

一個網頁像是一間房間,網頁上面的內容像是家具,那 Component 呢就是那一個一個的家具(電視、電腦、床,門...),如果今天我的房間想要把客廳的壁畫換掉的話,是不是只要把壁畫拿下來換新的上去就好拉! Component 也是這樣如果網頁上想要換某一個區塊就只要拿掉換成新的就好了!那我們來看看是怎麼做出一個 Component 。


<script>
    //新建一個 component 並且可以自己定義 tag 的名稱
    Vue.components('new-tag',{
        template: `
            <ul>
                <li>新的壁畫<li>
                <li>新的壁畫</li>
            </ul>
        `
    });
    var myApp = new Vue({
        //略過
    })
</script>

id = "myApp" 裡面加入新的標籤

//這個 tag 的名稱是上面有定義過的要注意
<new-tag></new-tag>

試試看有沒有成功


上一篇
(第五天)自我學習 - Vue輸入並即時顯示
下一篇
(第七天)自我學習 - 監督者 Watch
系列文
使用Vue製作簡單的 WorkBoard (30天)24

尚未有邦友留言

立即登入留言