html和vue混合开发

1.首先在页面引入vue.js(不熟悉vue项目的,可以在自己的项目引入使用)
2
3.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢,写个关于聊天的小demo吧!
/chat.id是来判断发消息的是自己还是别人
如果是1就是自己一般居右否则用v-else居左
其中布局使用flex布局
/
html部分//
html和vue混合开发_第1张图片
/css部分,其中rightarrow和leftarrow是用css3写的小三角/

.leftarrow {
margin-top: 5px;
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color: #051A2D #051A2D #051A2D #2e7bb2
}
.rightarrow {
margin-top: 5px;
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color: #051A2D #2e7bb2 #051A2D #051A2D
}
js部分//
var vm = new Vue({
el: ‘#app’,
data: {
dataList: []
},
});
pageUtils.HZAjax(pageUtils.HZ_ANSWER, formData, function(data) {
console.log(“13data:” + JSON.stringify(data))
if(null != data) {
var q_content = spellAnswer(q_content);
var lawContent = spellLaw(lawContent);
var caseContent = spellExample(caseContent);
html+=’

’+q_content+’

’+lawContent+’

’+caseContent+’

’;
vm.dataList.push({
ans: html
})

}, function() {
pageUtils.showToast(‘服务器异常’);
});

你可能感兴趣的:(学习笔记)