做一个用户评论页面，首先要写好静态的页面样式，再运用vue渲染数据，从而或得用户评论的数据，这里主要运用了v-for，以下是简单的示例代码
html
<div id="app"><ul class="comment-list"><li v-for="item in comments"><div ><div ><img src="../image/demo1.png" ></div><div><p>{{item.user.username}} <span>角色 {{item.id}}</span></p><p>{{item.user.created_at}}</p></div></div><div>{{item.content}}</div></li></ul>
</div>
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));}});};