index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>mvvm源码解析示例</title>
  <script src="./dist/mvvm.js"></script>
</head>

<body>
  <!-- 这是注释 -->
  <div id="app">
    <h1>MVVM测试</h1>
    <p>{{message}}</p>
    <p>message2: {{message}}</p>
    <div v-html="html"></div>

    <div v-if="vif">v-if指令测试</div>

    <div v-if="vif2">v-if指令测试22</div>

    <input id="test" type="color" v-model="message" name="" />
    <output>{{message}}</output>

    <p>{{arr}}</p>

    <button v-on:click="clickBtn">按钮</button>
  </div>
  <script type="text/javascript">
    var observer = new MutationObserver(function (mutations, observer) {
      console.log(arguments);
    });

    var app = document.querySelector('#app');

    var options = {
      'childList': true,
      'attributes': true
    };

    observer.observe(app, options);
  </script>
  <script type="text/javascript">
    var options = {
      el: '#app',
      data: {
        message: 'Hello, MVVM!',
        html: '<div style="color: red;">这是一段HTML</div>',
        vif: true,
        vif2: false,
        test: 'test',
        arr: [1, 2, 3]
      },
      computed: {
        getMessage: function () {
          return this.message;
        }
      },

      methods: {
        clickBtn: function (e) {
          this.vif = false;
        }
      }
    };

    var vm = new Mvvm(options);

    Object.freeze(options.data);

    // vm.$watch('vif', function(newValue, oldValue) {
    //   console.log('vif', newValue);
    // });

    vm.$nextTick(function () {
      //console.log(1111);
    });


    //
    //
    var worker = new Worker('work.js');
    worker.postMessage('Hello World');
    worker.postMessage({ method: 'echo', args: ['Work'] });


    worker.onmessage = function (event) {
      console.log('Received message ' + event.data);
      doSomething();
    }

    function doSomething() {
      // 执行任务
      worker.postMessage('Work done!');
    }
  </script>
</body>

</html>