iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

使用Vue.js製作個人blog系列 第 12

【Day 12】頁面:新增-2

新增的頁面開發

現在開始頁面開發囉~~

首先製作一個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架構的套件也是需要這樣的步驟


下一篇,繼續努力開發新增頁面!


上一篇
【Day 11】頁面:新增-1
下一篇
【Day 13】頁面:新增-3
系列文
使用Vue.js製作個人blog17

尚未有邦友留言

立即登入留言