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