Vue學習（一）：Vue例項
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue例項建立</title> </head> <body> <h3 id="example">{{ message }}</h3> <script type="text/javascript" src="vue.min.js"></script> <script> let data= {message: 'Hello Vue.'}; // 每個 Vue.js 應用的起步都是通過建構函式 Vue 建立一個 Vue 的根例項 let vm = new Vue({ el: '#example', data: data }); console.log(vm.message === data.message); // 資料是雙向繫結 vm.message = 'Hello Vue World.'; console.log(data.message); data.message= 'Hello Vue World, ha ha.'; console.log(vm.message); console.log(vm.$data === data); console.log(vm.$el === document.getElementById('example')); vm.$watch('message', function (newVal, oldVal) { // 這個回撥將在 `vm.message` 改變後呼叫 console.log('改變前：message=' + oldVal); console.log('改變後：message=' + newVal); }); vm.message = 'Hello Vue.'; </script> </body> </html>