数据变化(如与服务器交互)后,vue框架立即更新dom,不必再用javascript查找及操作dom进行更新,而且更新方式是优化了的,开销小。
ajaxTime.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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="divTime">
{{ajaxTime}}
<br>
<input v-model="ajaxTime"/>
</div>
</body>
</html>
<script>
var myVue=new Vue({
el:'#divTime',
data:{
ajaxTime:"2023-10-16 02:03:06"
}
});
function ajaxTime(){
$.ajax(
{
url:"./php/time.php",
success:function(result){
myVue.ajaxTime=result;
}}
);
}
setInterval("ajaxTime()",2000);
</script>
time.php
<?php
echo date("Y-m-d H:i:s ");
?>