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

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

 

 

本篇任務指引:

  1. 認識魔法陣
  2. 使用 Vue 寫出 HelloWorld

 

 

 

一、咕嚕咕嚕魔法陣

 

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

在這之前先預判,可能你已經聽過 vue-clivuex...等等,

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

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

 

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

 

到了 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>

 

畫面結果:(雖然畫面有點醜)

 

以上本次任務了解到,

如何綁定根組件,並且進行資料的渲染!

 

Next Stop:

Vue.js 2.0 - 帶著 Vue 框架闖蕩異世界 - [3]資料綁定的表單

 

 

有勘誤之處,不吝指教。ob'_'ov