vue页面和html混合,html和vue混合开发

1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用)

2

3.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢，写个关于聊天的小demo吧！

/chat.id是来判断发消息的是自己还是别人

如果是1就是自己一般居右否则用v-else居左

其中布局使用flex布局/

html部分//

/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(‘服务器异常’);

});