Vue的双向绑定及时响应，封装及优化了dom操作，极大的减少了代码量
例子：一个简易的网页聊天
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>an simplified example of chat based on Vue</title>
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="divVue">
<div id="idHtmlContents" v-html="htmlContents"></div>
<div class="divRight">
<input v-model="content" autofocus placeholder="在此输入要发送的消息" /><button @click="myOprate">send</button>
</div>
</div </body>
</html>
<script>
let time = new Date();
var myVue = new Vue({
el: "#divVue",
data: {
content: "",
htmlContents: ""
},
methods: {
myOprate: function() {
// let jsonData={"info":this.content};
// $.get("./php/addChat.php",jsonData,function(data,status){
// console.log(status+":"+data);
// });
//for simplification
this.htmlContents += time.toLocaleTimeString() + ":" + this.content + "<br>";
}
}
});
// function getChat(){
// $.post("./php/getChat.php",function(data,status){
// myVue.htmlContents=data;
// });
// setTimeout("getChat()",2000);
// }
// getChat();
</script>
<style>
#idHtmlContents {
height: 200px;
border: 1px solid gainsboro;
overflow-y: scroll;
clear: both;
}
.divRight {
width: 100%;
}
.divRight input {
width: 90%;
}
.divRight button {
width: 9.5%;
}
</style>
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
