新增的頁面開發

現在開始頁面開發囉～～

首先製作一個div

<div id="editor">
<div>

在這個div內製作「標題」：

<label>標題</label>
<input type="text" v-model="title">

接著是「內文」的部份：

<label>內容</label>
<textarea v-model="content"></textarea>

<button v-on:click="add()">存檔</button>

然後是顯示的內容，也是two-way binding的Demo:

<p>{{ title }}</p>
<p>{{ content }}</p>

接著是javascript，也就是Vue實作的部份：

var vm = new Vue({
    el: "#editor",
    data: {
        content: "# test"
    }
})

講解：
首先是標題和內容的部份，這邊都是一般的HTML語法，應該沒有什麼問題。不一樣的是「v-model="title"」、「v-model="content"」和「v-on:click="add()"」，這是什麼意思呢？
其中v-model是讓資料可以雙向傳遞的vue語法。可以砍到顯示內容的地方有「{{ title }}」，表示他們兩個（一個text box裡面，一個是在<p>）的資料會一樣。所以當我們在text box輸入的時候，外面的title會顯示出來。

而在javascript中的意思是，我現在宣告一個vm的物件，而這個物件是Vue的格式。而實作的Vue物件是一個ID=editor的東西中。並且用data，把我們在v-model的名稱，幫忙放入一個預設值「# test」。

注意：如果Vue沒有實作，則無法顯示內容，這是和一般的Javascript不一樣。不過很多javascript架構的套件也是需要這樣的步驟

下一篇，繼續努力開發新增頁面！