Vue 小Demo-留言板

个留言板小demo，题目来自《Vue.js实战》第九章 9.7实战：留言板。

有人想看源码，源码已上传GitHub

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

头条怎么插超链啊（捂脸）

看下需求：

输入昵称，以及留言内容，都不允许为空。
发布留言内容到留言板中。
留言回复。

Vue组件模板有3种书写形式：

第一种：使用script标签：<script type="text/x-template" id="myComponent"> 通过id来引用模板
第二种：使用template标签：<template id="myComponent">通过id来引用模板。HTML5才有template标签，IE未实现此标签。
第三种：单文件组件（ .vue格式文件）。适用与大型复杂的项目。

这个小demo 就使用简单的 script标签方式来写vue组件模板啦。

先看一下成品展示：

首先制作静态页：

制作动态页：

抽象出组件：抽象出三个组件 input组件，textarea组件，留言列表组件

input组件

编写模板

注册组件

使用组件

textarea 和留言列表组件：

注册组件：

使用组件

2.填充数据：

使用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

username 和 message 数据属性保存输入的值.

v-model是语法糖，对inout事件的包装，相当于：

发布功能：

发布公能是拿到输入的昵称(username) 和留言内容(message)，填充到留言板列表中。昵称和留言内容分别在 v-input 和 v-textarea组件中，而按钮在根组件中，与v-input和v-textarea为兄弟关系。所以我们将昵称和留言提取到 v-input v-textarea的父组件——根组件中。

通过 v-model指令，将昵称和留言内容，绑定到对应的子组件上去。

将v-model的值绑定到子组件中props中的 value属性上。父组件通过props向子组件传递数据。

在子组件中使用组件上v-model指令绑定的数据，input和 textarea标签需要使用，所以：

修改input标签元素，并删除v-input组件中的 data属性，这个不需要了：

将 props.value 绑定到 input元素的value属性上 :value 指向input元素的value属性。”value" 中的value指向 props中的value。input元素上监听input事件。input事件调用父组件的input事件来更新值。

对比一下可以发现v-model指令使用在html标签上和使用在组件之上是不一样的。当v-model指令用在组件上的时候，跟用在DOM元素上的使用方式并不一样，在DOM元素上使用v-model时，Vue帮我们实现了语法糖。在组件上使用v-model，Vue帮我们实现了一半的语法糖，剩下一半需要我们自己实现。

其实就是这样：

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 方法触发父组件(根组件)注册到子组件上的input事件，调用updateUsernameEvent来修改 username属性的值

看下效果：

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

子组件：

子组件还可以简写成这样：

对比一下可以发现在组件上使用v-model指令时，Vue帮我们实现了一半的语法糖：

v-model指令语法糖形式

没用使用v-model指令语法糖形式：

子组件中 Vue没用帮我们实现语法糖，所以我们需要我们自己实现：

v-textarea组件同样如此。

点击发布按钮，将 username 与 message 存储到留言列表中：

做一些验证判断，将 username 与 message 存储到留言列表中，并清空输入内容。将handleSend方法注册到 button标签元素的点击事件上。

使用push将数据插入数组中来触发视图更新。一定不要使用不能触发Vue视图更新的方式来修改更新数组！

Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

数组更新检测Vue官方文档列表渲染一节中有详细的介绍

渲染留言列表：

绑定留言列表 list到留言板v-list组件上：

注册v-list组件：

使用v-for渲染留言板：

效果如下：

回复功能：

回复同样也是将回复信息储存到留言列表中，所以将回复公能也放到根组件中；

将handleReply方法注册到 v-list组件中的 reply事件上。

通过点击事件来触发 reply事件

点击回复按钮时候，我们需要触发input标签的焦点事件。我们怎么拿到 input标签元素呢？可以给 input标签做一个标记：通过ref属性拿到所标记的元素或者组件实例：

通过 Vue的 $refs实例属性来访问注册过 ref 特性 的所有 DOM 元素和组件实例。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

通过 Vue的$refs实例属性来访问 input标签元素，并触发其焦点事件。$refs实例属性只能访问当前组件作用域内的（组件html模板内部） ref标签，无法被外部访问，父组件也不可以。

无法访问

因此我们需要先拿到子组件，然后在通过子组件去拿着子组件中ref标记的html元素标签。

给子组件加一个 ref标记：

通过 refs拿到子组件实例，调用子组件中的方法：

子组件通过 refs 拿到作用域内的 ref标记，（input标签元素）并触发焦点事件

看下效果：

在增加一个删除留言的功能：

注册到子组件的 delete事件上：

通过点击事件触发注册的 delete事件：

看下效果：

好了一个简单的留言板功能我们实现完了。

文共2678字，预计学习时长15分钟

图源：unsplash

使用JavaScript时，总会有各种需要发出调用请求的情况，进行ajax调用什么技术更适合呢？

最初，尽管有一些方法可以在不刷新页面的情况下从服务器提取数据，但它们通常依赖于笨拙的技术。直到微软为Outlook电子邮件客户端的替代浏览器开发了XMLHttpRequest。它在2006年成为了Web标准。

2015年，Fetch API随ES6引入。通用的Request和Response接口提供了一致性，而Promises允许更容易的链接和没有回调的异步/等待。Fetch简洁，优雅且易于理解，但是还有其他不错的选择，本文将简要的含义、语法以及利弊。

以下代码展示了使用不同替代方法的基本HTTP GET和POST示例。现在开始吧~

XMLHttpRequest

XMLHttpRequest对象可用于从Web服务器请求数据。它是这次比较中最早的方法，尽管其他选择都优于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

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();

发送：

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

优点：

· 不需要从外部源加载

· 向后兼容性

· 成熟/稳定

· 在所有浏览器中均可使用

· 是原生浏览器API

缺点：

· 支持回调地狱

· 笨拙冗长的语法

· Fetch能自然地替代它

图源：unsplash

Qwest

Qwest是一个基于Promise的简单ajax库，它支持XmlHttpRequest2的独立数据，例如ArrayBuffer，Blob和FormData。

得到：

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

发送：

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
     });

优点：

· 可以建立请求限制

· 基于Promise

缺点：

· 并非所有浏览器上都可使用XmlHttpRequest2

· 非原生

· 必须从外部源加载

JQuery.ajax

该库在不久前被广泛用于发出HTTP异步请求。jQuery的所有Ajax方法都返回XMLHTTPRequest对象的超集

得到：

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

发送：

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

优点：

· 良好的支持和文档

· 可配置的对象

· 在许多项目中使用

· 学习曲线低

· 它返回XMLHttpRequest对象，因此可以中止请求

缺点：

· 非原生

· 必须从外部源加载

· 没有与Promises结合

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

Axios

图源：unsplash

基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。

得到：

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

发送：

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

优点：

· 使用promise避免回调地狱

· 在浏览器和Nodejs上均可使用

· 支持上传进度

· 可以设置响应超时

· 通过简单地向其传递配置对象即可配置请求

· Axios已实现可撤销的promise提议

· 自动将数据转换为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)}
});

发送：

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

优点：

· 基于Promise

· 在Node.js和浏览器中均可使用

· 可以调用request.abort()方法中止请求

· 社区的知名库

· 发出HTTP请求的无缝接口

· 出现故障时支持重试请求

缺点：

· 它不支持以XMLHttpRequest的形式监视加载进度

· 非原生

· 必须从外部源加载

图源：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)
})

发送：

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

优点：

· 在Node.js和浏览器中均可使用

· 由服务器端工作人员使用

· 基于Promise

· 提供头部保护装置，以提高CORS的安全性

缺点：

· 必须从外部源加载

· 非原生

Fetch

Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。

得到：

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

发送：

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);
})();

优点：

· 是原生浏览器API

· Fetch基本上是经过完善的XMLHttpRequest

· 友好且易于学习

· 与大多数最近使用的浏览器兼容

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

· 学习曲线低

· 不需要从外部源加载它

· 使用promises避免回调地狱

· 不需要更多依赖项

缺点：

· 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json（）方法。对于Axios，默认情况下会收到JSON响应。

· 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。

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

· 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：

{credentials: “same-origin.”}

图源：unsplash

Fetch是一个新标准，新版本的Chrome和Firefox无需使用任何其他库就可支持它。

此外，Axios，SuperAgent或其他库都有适合的文档，易于使用，并且学习曲线不太高。在某些情况下，它们可以提供Fetch不具有的功能。

Fetch在JavaScript里是原生的，足以满足项目需求。如果没有特殊需求，我认为Fetch就是最合适的选择。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

tml源码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问数据库</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>使用数据库实现留言簿</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;
//创建数据库,获取数据库访问对象。var db=openDatabase('mydb','','mydatabase',102400);
//初始化function init() {
datatable=document.querySelector("#datatable");

在线咨询

上一篇：老男孩片尾曲牧马城市试听地址完整歌词介绍
下一篇：（切图笔记）通用的纯css3实现单选框复选框的美化附代码亲测好用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue 小Demo-留言板

XMLHttpRequest

Qwest

JQuery.ajax

Axios

SuperAgent

Http-client

Fetch

您的项目需求