开发工具：hbuilderx
内部项目新建后的界面：
html代码的head节点中载入
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> body节点中写一个div <div id="app"> {{a}} </div> 在body节点最后载入一个script节点，并开始js控制dom标签，这里使用vue模式来实时更新数据。 <script type="text/javascript"> var tda={a:111,b:222} //初始化数据对象 var vm=new Vue({ //这是vue的基本格式，需要载入一个节点和一个数据对象 el:"#app", data:tda }); //在vue中使用$符号相关的函数和变量来区分js中定义的变量和函数 vm.$watch("a",function(nv,ov){ //这个watch函数可以用来监控某个变量的数据变化情况，应为vue的数据是实时更新的，因此可以通过这个函数来观察数据更新前后的值，有利于开发调试 console.log(nv,ov) }); tda.a="text" //这里重新对对象中的变量a进行赋值后，watch函数会观测到 </script>
项目文件结构：
全部源代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{a}} </div> <script type="text/javascript"> var tda={a:111,b:222} var vm=new Vue({ el:"#app", data:tda }); vm.$watch("a",function(nv,ov){ console.log(nv,ov) }); tda.a="text" </script> </body> </html>
