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更好用劉金玉程式設計