开发者学堂课程【Vue.js 入门与实战：组件案例-发表评论功能的实现学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8187
组件案例-发表评论功能的实现
内容介绍
一、创建内容
二、将内容渲染为一个列表
三、制作评论发表框
四、制作评论发表按钮
五、实现发表评论功能
六、分析发表评论的业务逻辑
本节主要先做一个小的练习，学习如何实现评论列表，假设有一个页面，下面想设置一个评论列表，用来显示用户评论了什么内容，最上面设置一个发表的框用来写发表的内容，同时还有一个评论的按钮。
同时想要通过本地存贮来保存这些评论的内容。，代码如下：
一、创建内容：
首先，需要先创建一些可用的数据：
//创建Vue实例，得到ViewModel
Var vm = new Vue({el:’#app’,data: { List: [{ id:Date.now(),user:’李白’，content:’天生我材必有用’){ id:Date.now(),user:’江小白’，content:’劝君更尽一杯酒’){ id:Date.now(),user:’小马’，content:’我姓马，风吹草地见牛羊的马’) ]},methods:{},components:{ ‘cmt-box’} }); </script></body> </html>
二、将内容渲染为一个列表：
刚才已经创建好了表格内容，现在需要将以上内容渲染成为一个列表，使用如下代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content = ”width = device-width , initial-scale=1.0”>
<meta http-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>Document</title>
<script src=”./lib/vua-2.4.0.js”></script>
<link rel=”stylesheet” href=”./lib/bootstrap-3.3.7css”>
</head>
<body>
<div id=”app”>
<ul class=”list-group”>
<li class=”list-group-item” v-for=”item in list”:key=”item。id”>
<span class=”badge”>评论人：{{ item.user }}</span>
Item 1
</li>
<ul>
此时保存，右键浏览，可以看到以下执行结果：
三、制作评论发表框
除了能够直接写之外，也可以把发表评论的框定义为一个组件，组件定义的好处是可以把页面经常使用的内容抽离出来，方便使用，此时定义组件需要用以下代码：
var commentBox = {
Template:’#tmp1’
}
<template id=”tmpl”>
<div>
<div class=”form-group”>
<label>评论人:</label>
<input type =”text” class =”form-control”v -model = ”user”>
</div>
<div class=”form-group”>
<label>评论内容:</label>
<textarea class=”form-group”>，</textarea >
</div>
此时保存刷新，会发现，执行并看不到任何效果，原因在于当前的commentBox 并没有注册为一个组件，而是定义为了一个自变量，接下来把 commentBox 定义为一个 vm 的子组件，代码为：
methods：｛｝，Componente：｛ ‘cmt-box’:commentBox
此时，刷新，可以看到执行结果：
四、制作评论发表按钮
经过以上部分，现在只剩下最后一个步骤，就是制作评论发表按钮，代码如下：
刷新，可以看到已经可以显示。
<div class=”form-group”> <input type=”button” value=”发表评论”class=”btn btn-primary”
五、实现发表评论功能
接下来需要实现评论发表的功能，通过点击评论按钮，把评论人和评论内容放到 list 当中即可。代码如下：
<div class=”form-group”>
<label>评论内容：</label>
<input type= ”text”class = ”form-control ”v-model =”user”>
</div>
<div class=”form-group”>
<label>评论内容：</label>
<textarea class = ”form-control”v-model = ”content ”>
</textarea >
<div class=”form-group”>
<input type=”button” value=”发表评论”class=”btn btn-primary”@click=”postComment”>
<div>
以上代码需要定义到：
var commentBox = {
data(){
return {
user:’’,
content:’’
}
},
template:’#tmpl’,
methods:{
postComment(){ //发表评论的方法
此时保存刷新，右键查看，可以正常执行且没有报错。
六、分析发表评论的业务逻辑
//分析：发表评论的业务数据对象
//1.评论数据存在哪里--存放在了localStorage中localStorage，setItem(‘cmts’,‘’)
//2.先组织一个最新的评论数据对象
//3.想办法把第二步中得到的评论数据对象保存到localStorage中：
//3.1 localStorage只支持存放字符串数据，要先调用JSON.stringify
//3.2在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string），转换为一个数据对象，然后把最新的评论放在这个数组
//3.3如果获取到的localStorage中的评论字符串，为空不存在，则可以返回一个‘【】’让JSON.parse去转换
//3.4把最新的评论列表数组，再次调用JSON.stringify转为数据字符串，然后调用localStorage。setItem（）
var comment = { id: Date.now().user: this . user, content : this.content }
//从localStorage中获取所有的评论
var list=JSON,parse(localStorage.getItem(‘cmts’)’[]’)
list.push（comment）
//重新保存最新的评论数据
localStorage.setItem(‘cmta’,JSON.stringify(list))
this.user=this.content=’’
}
此时刷新执行，可以正常使用。但同时，因为一般最新的评论，都在最上方显示，所以应该把上面的 list.push（comment）改成， list.unshift（comment）。此时执行，可以看到最新评论已置顶。
