通過id來引用模板</li><li>第二種：使用template標籤 ：<template id="myComponent">通過id來引用模板。HTML5才有template標籤，IE未實現此標籤。</li><li>第三種：單文件組件（ .vue格式文件）。適用與大型複雜的項目。</li></ol><p>這個小demo 就使用簡單的 script標籤方式來寫vue組件模板啦。</p><p>先看一下成品展示：</p><ol><li>首先製作靜態頁：</li></ol><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530545783570be10d4eb2a" img_width="695" img_height="482" style="height:482px" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>製作動態頁：</p><p>抽象出組件：抽象出三個組件 input組件，textarea組件，留言列表組件</p><p>input組件</p><p>編寫模板</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15305462491546bdffe158e" img_width="569" img_height="161" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>註冊組件</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/153054635817835d676e2e2" img_width="306" img_height="204" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>使用組件</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/153054644014891e7c805e9" img_width="266" img_height="42" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>textarea 和留言列表組件：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530630664106e6909090d5" img_width="494" img_height="331" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>註冊組件：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/153063070930535739a2f86" img_width="284" img_height="147" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>使用組件</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306307540875c6c03810d" img_width="472" img_height="193" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>2.填充數據：</p><p>使用 v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。</p><p>username 和 message 數據屬性 保存輸入的值.</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/1530630893639269217c7a7" img_width="550" img_height="39" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530630905884a8a20ac331" img_width="328" img_height="34" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530630919238a5e6c83287" img_width="332" img_height="340" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>v-model是語法糖，對inout事件的包裝，相當於：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530630994444fb881e8c73" img_width="695" img_height="35" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530631014946beb4d7c2c8" img_width="518" img_height="266" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>發佈功能：</p><p>發佈公能是 拿到輸入的 暱稱(username) 和 留言內容(message)，填充到 留言板列表中。暱稱和留言內容分別在 v-input 和 v-textarea組件中，而 按鈕在 根組件中，與v-input和v-textarea為兄弟關係。 所以我們將 暱稱 和留言 提取到 v-input v-textarea的父組件——根組件中。</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530631203411ca1634c0bc" img_width="272" img_height="195" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過 v-model指令，將暱稱 和 留言內容，綁定到對應的子組件上去。</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/153063126411244e3899a3b" img_width="385" img_height="47" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>將v-model的值 綁定到 子組件中props中的 value屬性上。父組件通過props向子組件傳遞數據。</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306313717884b5adb9d7a" img_width="267" img_height="162" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>在子組件中使用組件上v-model指令綁定的數據，input和 textarea標籤需要使用，所以：</p><p>修改input標籤元素，並刪除v-input組件中的 data屬性，這個不需要了：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530631526924029e2d6c54" img_width="917" img_height="49" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>將 props.value 綁定到 input元素的value屬性上 :value 指向input元素的value屬性。”value" 中的value指向 props中的value。input元素上 監聽input事件。input事件調用父組件的input事件來更新值。</p><p>對比一下可以發現v-model指令使用在html標籤上 和 使用在 組件之上是不一樣的。當v-model指令 用在組件上的時候，跟用在DOM元素上的使用方式並不一樣，在DOM元素上使用v-model時，Vue幫我們實現了語法糖。在組件上使用v-model，Vue幫我們實現了一半的語法糖，剩下一半需要我們自己實現 。</p><p>其實就是這樣 ：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530631808648bd950e4086" img_width="556" img_height="29" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530631826880a51308bafa" img_width="471" img_height="307" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306318494827af97b1ea7" img_width="297" img_height="166" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>1. 將根組件（根實例可以看作根組件)中的 message 綁定到 子組件v-input中的 props中的 value中 。</p><p>2. 將根組件中的 updataUsernameEvent 方法註冊到 子組件中的 input事件上。</p><p>子組件v-input :</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306319874726fab3376b5" img_width="831" img_height="134" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530631998926919b4f9e7d" img_width="498" img_height="257" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>1.將v-input中的 props中的 value屬性 綁定到 input標籤中的 value屬性上。</p><p>2.將v-input中的方法 childrenInputEvent 方法 註冊 到inpu標籤中的input事件上。</p><p>v-input中的childrenInputEvent 方法觸發 父組件(根組件)註冊到子組件上的input事件，調用updateUsernameEvent來修改 username屬性的值</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306321108359525f6881f" img_width="543" img_height="29" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>看下效果：</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/15306322091067f0054efa3" img_width="914" img_height="654" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>v-model指令語法糖的形式如下：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530632250881d19d669db2" img_width="283" img_height="187" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/15306322862356e48976db6" img_width="331" img_height="31" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>子組件：</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/1530632307693db0aeefa55" img_width="465" img_height="257" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530632317216213bcab162" img_width="805" img_height="127" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>子組件還可以簡寫成這樣：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306323444069bd793ea0a" img_width="262" img_height="159" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530632349755302aaaac3f" img_width="942" img_height="133" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>對比一下 可以發現 在組件上使用v-model指令時，Vue幫我們實現了一半的語法糖 ：</p><p>v-model指令語法糖形式</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/15306323724655bf52d9ca9" img_width="331" img_height="31" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>沒用使用v-model指令語法糖形式 ：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306324686426169a60bd7" img_width="556" img_height="29" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>子組件中 Vue沒用幫我們實現語法糖，所以我們需要我們自己實現：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530632505524c3fea578f6" img_width="942" img_height="133" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>v-textarea組件同樣如此。</p><p>點擊發布按鈕，將 username 與 message 存儲到 留言列表中 ：</p><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/1530632733269562d2e665e" img_width="558" img_height="552" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>做一些驗證判斷，將 username 與 message 存儲到 留言列表中，並清空輸入內容。將handleSend方法註冊到 button標籤元素的點擊事件上。</p><p>使用push將數據插入數組中來觸發視圖更新。一定不要使用不能觸發Vue視圖更新的方式來修改更新數組！</p><p>Vue 不能檢測以下變動的數組：</p><ol><li>當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue</li><li>當你修改數組的長度時，例如：vm.items.length = newLength</li></ol><p>數組更新檢測Vue官方文檔 列表渲染 一節中有詳細的介紹</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/153063277673288a0bcdd7f" img_width="345" img_height="31" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>渲染留言列表：</p><p>綁定留言列表 list到 留言板v-list組件上：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306328197714412255238" img_width="294" img_height="34" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>註冊v-list組件：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306328377937b82d744fa" img_width="325" img_height="283" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>使用v-for渲染留言板：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306328674397e3c3580ca" img_width="579" img_height="217" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>效果如下：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635011375c638386ba9" img_width="693" img_height="632" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>回覆功能：</p><p>回覆同樣也是 將回覆信息儲存到留言列表中，所以將回復公能也放到 根組件中；</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530635048938ec62323782" img_width="440" img_height="221" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>將handleReply方法註冊到 v-list組件中的 reply事件上。</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635069855676c72eae9" img_width="452" img_height="42" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過點擊事件來觸發 reply事件</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635089724f3068b616d" img_width="483" img_height="33" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635100781ec81c97d5b" img_width="453" img_height="294" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>點擊回覆按鈕時候，我們需要觸發input標籤的焦點事件。我們怎麼拿到 input標籤元素呢？可以給 input標籤做一個 標記：通過ref屬性拿到所標記的元素或者組件實例：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635155072eed9935ce7" img_width="639" img_height="53" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過 Vue的 $refs實例屬性來訪問 註冊過 <strong>ref 特性</strong> 的所有 DOM 元素和組件實例。 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1530635179382f877ed980f" img_width="482" img_height="277" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過 Vue的$refs實例屬性來訪問 input標籤元素，並觸發其焦點事件。$refs實例屬性 只能訪問 當前組件作用域內的（組件html模板內部） ref標籤，無法被外部訪問，父組件也不可以。</p><p>無法訪問</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306351968194615cf4e0c" img_width="472" img_height="340" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>因此我們需要先拿到子組件，然後在通過子組件去拿著子組件中ref標記的html元素標籤。</p><p>給子組件加一個 ref標記：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306352231780d17a4a3c2" img_width="452" img_height="32" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過 refs拿到子組件實例，調用子組件中的方法：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306352404949710adc03d" img_width="473" img_height="324" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>子組件通過 refs 拿到作用域內的 ref標記，（input標籤元素）並觸發焦點事件</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/15306352620341322eb9463" img_width="410" img_height="279" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>看下效果：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530635303271c66814b477" img_width="693" img_height="632" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>在增加一個刪除留言的功能：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15306353411904a9f363a9a" img_width="476" img_height="415" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>註冊到子組件的 delete事件上：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/1530635361171b71ecc7d95" img_width="646" img_height="40" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>通過點擊事件觸發 註冊的 delete事件：</p><div class="pgc-img"><img src="http://p1.pstatp.com/large/pgc-image/153063544743526c821877e" img_width="707" img_height="62" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><div class="pgc-img"><img src="http://p9.pstatp.com/large/pgc-image/153063537966810a9a7e8ec" img_width="411" img_height="361" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>看下效果：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/153063551513112e963642d" img_width="693" img_height="632" alt="Vue 小Demo——留言板" inline="0"><p class="pgc-img-caption"></p></div><p>好了 一個簡單的留言板功能我們實現完了。</p></div>
閱讀更多 二傷小正太 的文章
