VueSource
/
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 v-text="wife.name"></p>
  <button v-on:click="update">更新</button>
</div>

<!--
dep
  与data中的属性一一对应  (4)
watcher
  与模板中一般指令/大括号表达式一一对应 (3)

1. 什么时候一个dep中关联多个watcher?
  多个指令或表达式用到了当前同一个属性  {{name}} {{name}}
2. 什么时候一个watcher中关联多个dep?
  多层表达式的watcher对应多个dep    {{a.b.c}}
-->


<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.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">
  new MVVM({
    el: '#test',
    data: {
      name: 'sadamu',  // dep0
      wife: { // dep1
        name: 'binbin', // dep2
        age: 18 // dep3
      }
    },
    methods: {
      update () {
        this.name = 'avatar'
      }
    }
  })
</script>
</body>

</html>