個留言板小demo，題目來自 《Vue.js實戰(zhàn)》第九章 9.7實戰(zhàn)：留言板。

有人想看源碼，源碼已上傳GitHub

GitHub地址 https://github.com/zhaiyifei/VueDemo.git

頭條怎么插超鏈啊（捂臉）

看下需求：

1. 輸入昵稱，以及留言內(nèi)容，都不允許為空。
2. 發(fā)布留言內(nèi)容到 留言板中。
3. 留言回復(fù)。

Vue組件模板有3種書寫形式：

1. 第一種：使用script標簽：<script type="text/x-template" id="myComponent"> 通過id來引用模板
2. 第二種：使用template標簽 ：<template id="myComponent">通過id來引用模板。HTML5才有template標簽，IE未實現(xiàn)此標簽。
3. 第三種：單文件組件（ .vue格式文件）。適用與大型復(fù)雜的項目。

這個小demo 就使用簡單的 script標簽方式來寫vue組件模板啦。

先看一下成品展示：

1. 首先制作靜態(tài)頁：

制作動態(tài)頁：

抽象出組件：抽象出三個組件 input組件，textarea組件，留言列表組件

input組件

編寫模板

注冊組件

使用組件

textarea 和留言列表組件：

注冊組件：

使用組件

2.填充數(shù)據(jù)：

使用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。

username 和 message 數(shù)據(jù)屬性 保存輸入的值.

v-model是語法糖，對inout事件的包裝，相當于：

發(fā)布功能：

發(fā)布公能是 拿到輸入的 昵稱(username) 和 留言內(nèi)容(message)，填充到 留言板列表中。昵稱和留言內(nèi)容分別在 v-input 和 v-textarea組件中，而 按鈕在 根組件中，與v-input和v-textarea為兄弟關(guān)系。 所以我們將 昵稱 和留言 提取到 v-input v-textarea的父組件——根組件中。

通過 v-model指令，將昵稱 和 留言內(nèi)容，綁定到對應(yīng)的子組件上去。

將v-model的值 綁定到 子組件中props中的 value屬性上。父組件通過props向子組件傳遞數(shù)據(jù)。

在子組件中使用組件上v-model指令綁定的數(shù)據(jù)，input和 textarea標簽需要使用，所以：

修改input標簽元素，并刪除v-input組件中的 data屬性，這個不需要了：

將 props.value 綁定到 input元素的value屬性上 :value 指向input元素的value屬性。”value" 中的value指向 props中的value。input元素上 監(jiān)聽input事件。input事件調(diào)用父組件的input事件來更新值。

對比一下可以發(fā)現(xiàn)v-model指令使用在html標簽上 和 使用在 組件之上是不一樣的。當v-model指令 用在組件上的時候，跟用在DOM元素上的使用方式并不一樣，在DOM元素上使用v-model時，Vue幫我們實現(xiàn)了語法糖。在組件上使用v-model，Vue幫我們實現(xiàn)了一半的語法糖，剩下一半需要我們自己實現(xiàn) 。

其實就是這樣 ：

1. 將根組件（根實例可以看作根組件)中的 message 綁定到 子組件v-input中的 props中的 value中 。

2. 將根組件中的 updataUsernameEvent 方法注冊到 子組件中的 input事件上。

子組件v-input :

1.將v-input中的 props中的 value屬性 綁定到 input標簽中的 value屬性上。

2.將v-input中的方法 childrenInputEvent 方法 注冊 到inpu標簽中的input事件上。

v-input中的childrenInputEvent 方法觸發(fā) 父組件(根組件)注冊到子組件上的input事件，調(diào)用updateUsernameEvent來修改 username屬性的值

看下效果：

v-model指令語法糖的形式如下：

子組件：

子組件還可以簡寫成這樣：

對比一下 可以發(fā)現(xiàn) 在組件上使用v-model指令時，Vue幫我們實現(xiàn)了一半的語法糖 ：

v-model指令語法糖形式

沒用使用v-model指令語法糖形式 ：

子組件中 Vue沒用幫我們實現(xiàn)語法糖，所以我們需要我們自己實現(xiàn)：

v-textarea組件同樣如此。

點擊發(fā)布按鈕，將 username 與 message 存儲到 留言列表中 ：

做一些驗證判斷，將 username 與 message 存儲到 留言列表中，并清空輸入內(nèi)容。將handleSend方法注冊到 button標簽元素的點擊事件上。

使用push將數(shù)據(jù)插入數(shù)組中來觸發(fā)視圖更新。一定不要使用不能觸發(fā)Vue視圖更新的方式來修改更新數(shù)組！

Vue 不能檢測以下變動的數(shù)組：

1. 當你利用索引直接設(shè)置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數(shù)組的長度時，例如：vm.items.length = newLength

數(shù)組更新檢測Vue官方文檔 列表渲染 一節(jié)中有詳細的介紹

渲染留言列表：

綁定留言列表 list到 留言板v-list組件上：

注冊v-list組件：

使用v-for渲染留言板：

效果如下：

回復(fù)功能：

回復(fù)同樣也是 將回復(fù)信息儲存到留言列表中，所以將回復(fù)公能也放到 根組件中；

將handleReply方法注冊到 v-list組件中的 reply事件上。

通過點擊事件來觸發(fā) reply事件

點擊回復(fù)按鈕時候，我們需要觸發(fā)input標簽的焦點事件。我們怎么拿到 input標簽元素呢？可以給 input標簽做一個 標記：通過ref屬性拿到所標記的元素或者組件實例：

通過 Vue的 $refs實例屬性來訪問 注冊過 ref 特性 的所有 DOM 元素和組件實例。 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例

通過 Vue的$refs實例屬性來訪問 input標簽元素，并觸發(fā)其焦點事件。$refs實例屬性 只能訪問 當前組件作用域內(nèi)的（組件html模板內(nèi)部） ref標簽，無法被外部訪問，父組件也不可以。

無法訪問

因此我們需要先拿到子組件，然后在通過子組件去拿著子組件中ref標記的html元素標簽。

給子組件加一個 ref標記：

通過 refs拿到子組件實例，調(diào)用子組件中的方法：

子組件通過 refs 拿到作用域內(nèi)的 ref標記，（input標簽元素）并觸發(fā)焦點事件

看下效果：

在增加一個刪除留言的功能：

注冊到子組件的 delete事件上：

通過點擊事件觸發(fā) 注冊的 delete事件：

看下效果：

好了 一個簡單的留言板功能我們實現(xiàn)完了。

于想從事IT工作的人們來說，HTML5前端開發(fā)是一個不錯的切入點。學(xué)習(xí)的門檻低，而且與后端語言相比，前期沒有那么多抽象的知識需要理解，HTML5的學(xué)習(xí)曲線是先快后慢的。

對于HTML5零基礎(chǔ)的人員來說，可能看到一開始有許多的知識點，就會覺得基礎(chǔ)知識很多、很難學(xué)，其實只要規(guī)劃好了一條學(xué)習(xí)路線，學(xué)習(xí)的時候更有針對性，HTML5遠沒有看起來那么難，知識點也沒有你想的那么復(fù)雜。

1、HTML5介紹

內(nèi)容包括：(互聯(lián)網(wǎng)發(fā)展趨勢、HTML5語言的優(yōu)勢、簡單易學(xué)人人都能編程、H5就業(yè)和薪資情況、HTML5常見的項目與產(chǎn)品、HTML5的未來與方向)

2、HTML基礎(chǔ)

內(nèi)容包括：(HTML簡介與歷史版本、常用開發(fā)軟件、常見標簽與屬性、表格與表單、標簽規(guī)范與標簽語義化、實戰(zhàn)：網(wǎng)頁結(jié)構(gòu)布局)

3、CSS基礎(chǔ)

內(nèi)容包括：(CSS簡介與基本語法、常見的各種樣式屬性、CSS選擇器與標簽類型、理解盒子模型與CSS重置、浮動與定位、利用PS工具測量樣式、HTML+CSS開發(fā)網(wǎng)頁、實戰(zhàn)：仿電商首頁效果)

4、CSS3基礎(chǔ)

內(nèi)容包括：(CSS3常見樣式、CSS3選擇器、變形與動畫、3D效果與關(guān)鍵幀、彈性盒模型）

5、移動端布局

（移動端基本概念、viewport窗口設(shè)置、移動端布局方案、rem、vh、vw等單位、響應(yīng)式布局、bootstrap框架)

6、JavaScript基礎(chǔ)

內(nèi)容包括：(JS簡介、JS變量、數(shù)據(jù)類型與類型轉(zhuǎn)換、運算符與優(yōu)先級、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環(huán)、break、continue語法、函數(shù)定義與調(diào)用、全局變量與局部變量。還有函數(shù)傳參與返回值、函數(shù)作用域與變量作用域、DOM的基本操作、定時器使用、this指向與修改指向、數(shù)組、字符串等方法操作、時間對象與正則對象、掌握常見BOM操作、常見事件與事件細節(jié)、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實戰(zhàn)：JS配合HTML與CSS完成電商項目)

7、jquery框架

內(nèi)容包括：(jquery框架介紹及優(yōu)勢介紹、jquery核心思想、jquery常見方法、jquery動畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發(fā)網(wǎng)頁)

8、PHP基礎(chǔ)

內(nèi)容包括：(PHP簡介與基本語法、mysql數(shù)據(jù)庫及sql語法、apache服務(wù)器與集成開發(fā)工具、PHP鏈接數(shù)據(jù)庫、PHP與AJAX交互、實戰(zhàn)：留言板、登錄、注冊等)

9、HTML5基礎(chǔ)項目

內(nèi)容包括：(項目簡介、項目功能演示、項目劃分及框架、編寫HTML頁面結(jié)構(gòu)、設(shè)置CSS樣式、添加JS交互、可選框架：bootstrap、jquery、PHP等、項目調(diào)試及兼容、項目驗收)

雖然HTML5前端薪資高入門門檻低， 但是俗話說得好：入門容易，精通難。HTML5前端開發(fā)的知識點繁多，要想真正掌握HTML5前端工程師開發(fā)技能，并非易事，因此什么時候也不要忘記多學(xué)習(xí)，多思考，多練習(xí)。