Javascript的进阶版--VUE，使用vue载入基本使用结构，封装过的js更好用刘金玉编程

开发工具：hbuilderx

内部项目新建后的界面：

html代码的head节点中载入

body节点中写一个div

</div>

在body节点最后载入一个script节点，并开始js控制dom标签，这里使用vue模式来实时更新数据。

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>

复制

在西瓜视频中，找到作者【刘金玉】的更多视频教程吧！

长按关注公众号

Javascript的进阶版--VUE，使用vue载入基本使用结构，封装过的js更好用 刘金玉编程

Javascript的进阶版--VUE，使用vue载入基本使用结构，封装过的js更好用刘金玉编程