iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
1
Modern Web

Vue.js 30天系列 第 2

Vue.js 02 - 結構

Vue.js 是個專注在 視圖層 (View) 的框架,幫助開發者切分前端的資料狀態和運作邏輯,

從這樣(馬鈴薯)
http://ithelp.ithome.com.tw/upload/images/20161217/20103424o01IQvu55b.jpg

變成這樣(山葡萄)
http://ithelp.ithome.com.tw/upload/images/20161217/20103424rTQfnUPNvi.jpg

不好意思,是長這樣
http://ithelp.ithome.com.tw/upload/images/20161217/201034242gP99byYwe.png

想吃哪部分都容易,由你決定各自獨立運作或是相連。

葡萄自然有個供應養分的起始點,也就是根。讓我們三秒看完長怎樣

<div id="app">
    {{ message }}
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
</srcipt>

我們可以從根向下延伸,長出更多顆葡萄,這一個個葡萄皆可個別定義,稱為 元件 (Component)

下面例子加了 menu 和 description 兩個元件

<div id="app">
    {{ message }}
    <menu-section></menu-section>
    <description-section></description-section>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    components: {
        'menu-section': {
            template: '<ul><li v-for="item in menuItems">{{ item.text }}</li></ul>',
            data: function() {
                return {
                    menuItems: [{
                        text: 'About me'
                    }, {
                        text: 'Articles'
                    }, {
                        text: 'contact'
                    }]
                }
            }
        },
        'description-section': {
            template: '<p>{{ text }}</p>',
            data: function() {
                return {
                    text: 'Hello, I am Ralph.'
                }
            }
        }
    }
});
</script>

直到你滿意為止 (或是電腦撐不住為止)


圖片來源


上一篇
Vue.js 01 - 前言
下一篇
Vue.js 03 - 開發環境
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言