<!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>