<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3节 数据和方法</title>
<!-- 1 引入Vue JavaScript -->
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<!--
1 大部分用响应式
-->
</head>
<body>
<!-- 定义div 标签。 通过id选择器方式 -->
<div id="app">
<!-- 变量定义 -->
{{a}}
<!-- 声明变量2 b -->
<!-- {{b}} -->
</div>
<script type="text/javascript">
// 定义声明data变量。对象形式的变量 data。
var data = { a: 1 };
// Vue的实例化， 实例化一个对象出来。 这里的实例化对象是VM。
var vm = new Vue({
el: "#app",
data: data
});
// data.a="hi,,,new..."
// vm.a="test";
// data.a==vm.a;
vm.$data.a="test。。。。数据改变，响应式系统追踪到就更新这个改变"
// watch 观察 watch方法
vm.$watch('a',function (newVal,oldVal) {
console.info(newVal,oldVal);
})
</script>
</body>
</html>
效果