做一个用户评论页面，首先要写好静态的页面样式，再运用vue渲染数据，从而或得用户评论的数据，这里主要运用了v-for，以下是简单的示例代码
html
js
var vm=new Vue({
el:'#app',
data:{
comments:[]
},
created:function(){
var that=this;
app.get('news/'+id+'/comment',function(data){
that.comments=data.data
})
}
})
注意：上文使用的app.get方法，是自己定义的ajax请求数据的方法，原方法为
$.ajax({
url: '接口根目录' + url,
type: 'get',
dataType: 'json',
headers:{'Authorization': 'Bearer ' + localStorage.getItem('token')},
success: success,
error: error
});
这里的接口连接也可以为本地，当前端做测试用时可以创建一个本地的json文件，自定义数据然后我们的评论功能就要开始了，，
首先呢，要先一下思路，，我们做评论功能呢，，是不是要先有一个输入框输入评论的内容，，恩恩，，对哒，，我们要写一个固定在界面底部的输入框，当输入框或得焦点时，弹出手机默认的输入键盘，因为我们这里运用的是apicloud进行开发，它本身就有一个UIChatBox的功能，是原生开发，所以我们这里直接调用他们就好了，，
是不是又get到一个知识点呢？？？
首先呢，要调用这一个功能，在页面里面我们调用apicloud的功能都需要将js代码写在apiready=function(){};
var UIChatBox = api.require('UIChatBox');
UIChatBox.open({
},function(ret,err){
if (ret) {
alert(JSON.stringify(ret));
如果引入成功，alert输入框里面输入的内容
注意：ret对象里面的eventType有三种状态show、send、clickExtras，我们操作的一般是send这个状态，这里下面可以用到
} else {
alert(JSON.stringify(err));
报错提示，当内容为空时，进行err提示
}
});现在所有的界面都已完成，，现在我们开始发布评论啦，现在想想，我们发布一条评论应该是先把数据传给数据库，然后再从数据库读取数据再进行渲染，，这里就用到的post传值，因为只有或得输入框内的数据才能传值，所以我们把这个传值的方法写到UIChatBox.open的回掉函数ret里面，又因为我们执行的是发送这个按钮才进行的post，所以要加判断ret.eventType是否为send
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
content: ret.msg
}, function (data) {
api.toast({
msg: '发送成功'
});
}, function (xhr) {
})
}
}这里的app.post和上文提到的app.get都是我们自己定义的，有兴趣的同学可以去查一下ajax传递数据的方法，，
到目前为止，，评论的数据提交已经完成了，，下面我们进行评论数据提交后的读取，，大家都知道获取数据用到get方法，传数据用到post方法，，所以呢我们这里又用到了app.get,这里的评论接口获取在上文中已经实现了，说十一我们只需在UIChatBox.open的回掉函数ret里面给comments的这个数组里面追加一个新的对象，让它显示在评论列表下面，这个就so easy啦
vm.comments.push(data)
因为这里的UIChatBox.open函数跟上文的open行数不是同一个函数，所以这里用把上面的new Vue定义为vm，这里调用vm即可到这里，，发布评论已经成功了，，
虽然功能是实现啦，，但是好像用户体验方面做的还不是很好，当你发布成功之后，手机上的输入键盘还依然显示在那里，，是不是不大符合用户体验呢，所以我们要让它发送成功后将输入键盘隐藏，这里就要用的UIChatBox.open的参数了
收起键盘
closeKeyboard()UIChatBox.open详细用法请参考链接描述
下面是该例子的完整代码
apiready = function(){
var id=api.pageParam.id;
var UIChatBox = api.require('UIChatBox');
var vm=new Vue({
el:'#app',
data:{
comments: []
},
created:function(){
var that=this;
app.get('news/'+id + '/comments',function(data){
that.comments=data.data;
// console.log(data)
},function(err){
})
}
});
UIChatBox.open({
style:{
indicator:{
target:'both'
}
}
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
content: ret.msg
}, function (data) {
vm.comments.push(data)
api.toast({
msg: '发送成功'
});
UIChatBox.closeKeyboard();
}, function (xhr) {
switch (xhr.status) {
case 422:
api.toast({
msg: xhr.responseJSON.content[0]
});
break;
}
})
}
} else {
alert(JSON.stringify(err));
}
});
};
{{item.user.username}} 角色 {{item.id}}
{{item.user.created_at}}