Vue.js 2.0 - 帶著 Vue 框架闖蕩異世界 - ［2］環境建置的前哨 | Robby - 全端的 Front-End Engineer - 點部落

2017-07-28

Vue.js 2.0 - 帶著 Vue 框架闖蕩異世界 - ［2］環境建置的前哨

記錄著從 Vue 新手村出發的練功歷程...

本篇任務指引：

認識魔法陣
使用 Vue 寫出 HelloWorld

一、咕嚕咕嚕魔法陣

首先要了解 Vue 的環境基本組成，

在這之前先預判，可能你已經聽過 vue-cli、vuex...等等，

但無論如何，使用這類快速指令或框架之前，總得要會最基本的使用方式，

因此將從最簡單的使用方式講起。

首先這是我們常見的網頁基本架構：

到了 Vue 其實也是以相似的架構進行，

由於網頁是由上往下讀取，因此會在末端下方插入 script，進行 DOM 的操作。

在寫之前我們會將 vue.js 引入：

可以使用官方範例所使用的：

<script src="https://unpkg.com/vue"></script>

也可以使用 CDN：

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js'></script>

以上就是最基本的環境配置結構，很好理解吧！

二、建立第一個魔法陣

在範例的內容中，程式碼只顯示 body 的內容，別忘了 head 要引入 vue.js 哦

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js'></script>

我們試著利用 Vue.js 寫出 HelloWorld：

<body>

    <div id="hello">
        {{ msg }}
    </div>
    <script>
        new Vue({
            el: '#hello',
            data: {
                msg: 'Hello World !'
            }
        });
    </script>
</body>

打開網頁看結果就可以看到：

首先 el 原本名稱其實是 element，表示你想要綁定哪個網頁元件，做為根組件，

什麼意思？如下圖紅框處：

我們決定源頭根的來源是 #hello，

用「＃」表示要尋找的依據是 id，

el: '#hello'

如果今天想找 class 為 hello 的就是用「.」：

el: '.hello'

所以今天只要在 id 為 hello 的元件中塞入任何東西，

通通都會受到根組件的控制，像是下方範例的 label，通通都可以被根組件控制。

<div id="hello">
 {{ msg }}
 <label>葡萄1<label>
 <label>葡萄2<label>
</div>

那剛剛的 data 是什麼呢？

data: {
   msg: 'Hello World !'
}

data 可以用來儲存我們的資料，你也可以放陣列：

data: {
   msg: 'Hello World !',
   arr: [1,2,3] 
}

因此我們有了一個變數 msg，其值為一個字串 'Hello World !'，

最後如果我們想要取出他讓它渲染在畫面上，只要利用兩個大括弧 {{ }} 就可以做到：

<div id="hello">
    {{ msg }}
</div>

三、強化你的魔法陣

經過上述的範例，請試著將下方改以 vue 方式渲染資料，

在 label 中的文字請改成 data 的方式綁定：

<div id="hello">
 {{ msg }}
 <label>葡萄1<label>
 <label>葡萄2<label>
</div>

首先開始畫陣，進行等價交換！

欸不對，臭 87。

只要修改一下剛剛的程式就可做到，

在 data 內新增變數，用來存放此兩個字串：

data: {
   msg: 'Hello World !',
   grapes1: '葡萄1',
   grapes2: '葡萄2',
}

再將剛剛 label 的內容改為 {{ }} 方式綁定即可：

<div id="hello">
 {{ msg }}
 <label>{{ grapes1 }}<label>
 <label>{{ grapes2 }}<label>
</div>

完整程式碼：

<body>

    <div id="hello">
        {{ msg }}
        <label>{{ grapes1 }}</label>
        <label>{{ grapes2 }}</label>
    </div>
    <script>
        new Vue({
            el: '#hello',
            data: {
                msg: 'Hello World !',
                grapes1: '葡萄1',
                grapes2: '葡萄2',
            }
        });
    </script>
</body>

畫面結果：~~（雖然畫面有點醜）~~