Vue 小Demo-留言板

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

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

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

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

看下需求：

輸入昵稱，以及留言內容，都不允許為空。
發(fā)布留言內容到留言板中。
留言回復。

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

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

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

先看一下成品展示：

首先制作靜態(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) 和留言內容(message)，填充到留言板列表中。昵稱和留言內容分別在 v-input 和 v-textarea組件中，而按鈕在根組件中，與v-input和v-textarea為兄弟關系。所以我們將昵稱和留言提取到 v-input v-textarea的父組件——根組件中。

通過 v-model指令，將昵稱和留言內容，綁定到對應的子組件上去。

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

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

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

將 props.value 綁定到 input元素的value屬性上 :value 指向input元素的value屬性?！眝alue" 中的value指向 props中的value。input元素上監(jiān)聽input事件。input事件調用父組件的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事件，調用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 存儲到留言列表中，并清空輸入內容。將handleSend方法注冊到 button標簽元素的點擊事件上。

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

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

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

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

渲染留言列表：

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

注冊v-list組件：

使用v-for渲染留言板：

效果如下：

回復功能：

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

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

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

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

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

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

無法訪問

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

給子組件加一個 ref標記：

通過 refs拿到子組件實例，調用子組件中的方法：

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

看下效果：

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

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

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

看下效果：

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

文共2678字，預計學習時長15分鐘

圖源：unsplash

使用JavaScript時，總會有各種需要發(fā)出調用請求的情況，進行ajax調用什么技術更適合呢？

最初，盡管有一些方法可以在不刷新頁面的情況下從服務器提取數(shù)據(jù)，但它們通常依賴于笨拙的技術。直到微軟為Outlook電子郵件客戶端的替代瀏覽器開發(fā)了XMLHttpRequest。它在2006年成為了Web標準。

2015年，F(xiàn)etch API隨ES6引入。通用的Request和Response接口提供了一致性，而Promises允許更容易的鏈接和沒有回調的異步/等待。Fetch簡潔，優(yōu)雅且易于理解，但是還有其他不錯的選擇，本文將簡要的含義、語法以及利弊。

以下代碼展示了使用不同替代方法的基本HTTP GET和POST示例?，F(xiàn)在開始吧~

XMLHttpRequest

XMLHttpRequest對象可用于從Web服務器請求數(shù)據(jù)。它是這次比較中最早的方法，盡管其他選擇都優(yōu)于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

var req= new XMLHttpRequest();//The onreadystatechange property
//specifies a function to be
//executed every time the status
//of the XMLHttpRequest changes
req.onreadystatechange = function() {
    if (this.readyState == 4 &&this.status == 200) {
       //The responseText property
       //returns a text string          
       console.log(xhttp.responseText)
       //Do some stuff
    }
};req.open("GET", "http://dataserver/users", true);
req.send();

發(fā)送：

varformData = new FormData();
formData.append("name", "Murdock");
var req = new XMLHttpRequest();
req.open("POST", "http://dataserver/update");
req.send(formData);

優(yōu)點：

· 不需要從外部源加載

· 向后兼容性

· 成熟/穩(wěn)定

· 在所有瀏覽器中均可使用

· 是原生瀏覽器API

缺點：

· 支持回調地獄

· 笨拙冗長的語法

· Fetch能自然地替代它

圖源：unsplash

Qwest

Qwest是一個基于Promise的簡單ajax庫，它支持XmlHttpRequest2的獨立數(shù)據(jù)，例如ArrayBuffer，Blob和FormData。

得到：

qwest.get('http://dataserver/data.json')
     .then(function(xhr, response) {
        // ...do some stuff whith data
     });

發(fā)送：

qwest.post('http://dataserver/update',{
        firstname: 'Murdock',      
        age: 30
     })
     .then(function(xhr, response) {
        // Make some useful actions
     })
     .catch(function(e, xhr, response) {
        // Process the error
     });

優(yōu)點：

· 可以建立請求限制

· 基于Promise

缺點：

· 并非所有瀏覽器上都可使用XmlHttpRequest2

· 非原生

· 必須從外部源加載

JQuery.ajax

該庫在不久前被廣泛用于發(fā)出HTTP異步請求。jQuery的所有Ajax方法都返回XMLHTTPRequest對象的超集

得到：

$.ajax({
    url: 'http://dataserver/data.json'
  }).done(function(data) {
    // ...do some stuff whith data
  }).fail(function() {
    // Handle error
});

發(fā)送：

$.ajax({
  type: "POST",
  url: 'http://dataserver/update',
  data: data,
  success: successCallBack,
  error: errorCallBack,
  dataType: dataType
});

優(yōu)點：

· 良好的支持和文檔

· 可配置的對象

· 在許多項目中使用

· 學習曲線低

· 它返回XMLHttpRequest對象，因此可以中止請求

缺點：

· 非原生

· 必須從外部源加載

· 沒有與Promises結合

· 對于原生ES6 Fetch不是必需的。

Axios

圖源：unsplash

基于Promise的HTTP庫，用于在瀏覽器和Nodejs上執(zhí)行HTTP請求。

得到：

axios({
  url: 'http://dataserver/data.json',
  method: 'get'
})

發(fā)送：

axios.post('http://dataserver/update',{
    name: 'Murdock'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

優(yōu)點：

· 使用promise避免回調地獄

· 在瀏覽器和Nodejs上均可使用

· 支持上傳進度

· 可以設置響應超時

· 通過簡單地向其傳遞配置對象即可配置請求

· Axios已實現(xiàn)可撤銷的promise提議

· 自動將數(shù)據(jù)轉換為JSON

缺點：

· 非原生

· 必須從外部源加載

SuperAgent

SuperAgent是ajax API，旨在提供靈活性，可讀性和較低的學習曲線。它也可以與Node.js一起使用。

得到：

request('GET','http://dataserver/data.json').then(
success, failure);

.query（）方法接受對象，這些對象與GET方法一起使用時將形成查詢字符串。以下代碼將產生路徑/ dataserver / search？name = Manny＆lastName = Peck＆order = desc。

request
   .get('/dataserver/search')
   .query({ name: 'Templeton' })
   .query({ lastname: 'Peck' })
   .query({ order: 'desc' })
   .then(res => {console.dir(res)}
});

發(fā)送：

request
   .post('http://dataserver/update')
   .send({ name: 'Murdock' })
   .set('Accept', 'application/json')
   .then(res => {
      console.log('result' +JSON.stringify(res.body));
   });

優(yōu)點：

· 基于Promise

· 在Node.js和瀏覽器中均可使用

· 可以調用request.abort()方法中止請求

· 社區(qū)的知名庫

· 發(fā)出HTTP請求的無縫接口

· 出現(xiàn)故障時支持重試請求

缺點：

· 它不支持以XMLHttpRequest的形式監(jiān)視加載進度

· 非原生

· 必須從外部源加載

圖源：unsplash

Http-client

Http-client允許使用JavaScript的訪存API組成HTTP客戶端。

得到：

//usingES6 modules
import { createFetch, base, accept, parse } from 'http-client'const fetch =createFetch(
 base('http://dataserver/data.json'), 
  accept('application/json'),    
  parse('json')                     
)fetch('http://dataserver/data.json').then(response => {
  console.log(response.jsonData)
})

發(fā)送：

//usingES6 modules
import { createFetch, method, params } from 'http-client'const fetch =createFetch(
  params({ name: 'Murdock' }),
  base('http://dataserver/update')
)

優(yōu)點：

· 在Node.js和瀏覽器中均可使用

· 由服務器端工作人員使用

· 基于Promise

· 提供頭部保護裝置，以提高CORS的安全性

缺點：

· 必須從外部源加載

· 非原生

Fetch

Fetch是原生瀏覽器API，用于發(fā)出替代XMLHttpRequest的請求。與XMLHttpRequest相比，F(xiàn)etch使網絡請求更容易。Fetch API使用Promises避免XMLHttpRequest回調地獄。

得到：

//WithES6 fetch
fetch('http://dataserver/data.json')
  .then(data => {
    // ...do some stuff whith data
  }).catch(error => {
    // Handle error
});

發(fā)送：

fetch('http://dataserver/update',{
  method: 'post',
  headers: {
    'Accept': 'application/json,text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({name: 'Murdock'})
}).then(res=>res.json())
  .then(res => console.log(res));//ORwith ES2017 for example(async () => {
 
  const response = awaitfetch('http://dataserver/update', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body:JSON.stringify({name='Murdock'})
  });const result = awaitresponse.json();console.log(result);
})();

優(yōu)點：

· 是原生瀏覽器API

· Fetch基本上是經過完善的XMLHttpRequest

· 友好且易于學習

· 與大多數(shù)最近使用的瀏覽器兼容

· 是原生XMLHttpRequest對象的自然替代

· 學習曲線低

· 不需要從外部源加載它

· 使用promises避免回調地獄

· 不需要更多依賴項

缺點：

· 處理JSON數(shù)據(jù)的過程分為兩步。第一個是發(fā)出請求，然后第二個是在響應時調用.json（）方法。對于Axios，默認情況下會收到JSON響應。

· 從Fetch()返回的Promise僅在網絡故障或任何阻止請求完成的情況發(fā)生時拒絕。即使響應為HTTP 404或500，也不會拒絕HTTP錯誤狀態(tài)。

· 缺乏其他庫的一些有用功能，例如：取消請求。

· 默認情況下，F(xiàn)etch不會從服務器發(fā)送或接收Cookie，如果站點依賴于維持用戶會話，則會導致未經身份驗證的請求。但是可以通過添加以下內容來啟用：

{credentials: “same-origin.”}

圖源：unsplash

Fetch是一個新標準，新版本的Chrome和Firefox無需使用任何其他庫就可支持它。

此外，Axios，SuperAgent或其他庫都有適合的文檔，易于使用，并且學習曲線不太高。在某些情況下，它們可以提供Fetch不具有的功能。

Fetch在JavaScript里是原生的，足以滿足項目需求。如果沒有特殊需求，我認為Fetch就是最合適的選擇。

留言點贊關注

我們一起分享AI學習與發(fā)展的干貨

如轉載，請后臺留言，遵守轉載規(guī)范

tml源碼：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訪問數(shù)據(jù)庫</title>
<style>
#name{width: 180px;
}#msg{width: 180px;height: 180px;font-size: 20px;
}#save{width: 80px;line-height: 30px;background-color: cornflowerblue;border: 0px;
}</style>
</head>
<body>
<h1>使用數(shù)據(jù)庫實現(xiàn)留言簿</h1>
<label for="name">姓名：</label>
<input id="name" type="text" placeholder="請輸入姓名："/><br/>
<label for="msg">留言：</label>
<textarea id="msg" placeholder="請輸入留言信息" ></textarea>
<br/>
<button id="save" >保存</button>
<hr />
<table border="1" id="datatable" cellspacing="0" cellpadding="0"></table>
<p id="msgs"></p>
<script type="text/javascript" src="js/db.js"></script>
</body>
</html>db.js源碼：window.onload=init;
var datatable=null;
//創(chuàng)建數(shù)據(jù)庫,獲取數(shù)據(jù)庫訪問對象。var db=openDatabase('mydb','','mydatabase',102400);
//初始化function init() {
datatable=document.querySelector("#datatable");

在線咨詢

上一篇：老男孩片尾曲牧馬城市試聽地址完整歌詞介紹
下一篇：（切圖筆記）通用的純css3實現(xiàn) 單選框復選框的美化附代碼親測好用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

Vue 小Demo-留言板

XMLHttpRequest

Qwest

JQuery.ajax

Axios

SuperAgent

Http-client

Fetch

您的項目需求