06_数据劫持-数据绑定.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>06_数据劫持-数据绑定</title>
  <!--
    1. 数据绑定
      * 初始化显示: 页面(表达式/指令)能从data读取数据显示 (编译/解析)
      * 更新显示: 更新data中的属性数据==>页面更新
  -->
</head>
<body>
<div id="test">
  <p>{{name}}</p>
  <p v-text="name"></p>
  <p>{{wife.name}}</p>
  <button v-on:click="update">更新</button>
</div>

<script type="text/javascript" src="./js/mvvm/compile.js"></script>
<script type="text/javascript" src="./js/mvvm/observer.js"></script>
<script type="text/javascript" src="./js/mvvm/watcher.js"></script>
<script type="text/javascript" src="./js/mvvm/mvvm.js"></script>
<script type="text/javascript">
  const vm = new MVVM({
    el: '#test',
    data: {
      name: 'sadamu',
      wife: {
        name: 'DY',
        age: 22
      }
    },
    methods: {
      update () {
        this.name = 'SADAMU'
        this.wife.name = 'BB'
      }
    }
  })
</script>
</body>

</html>