优化mvvm，添加$watch方法

hong-boy · Apr 13, 2017 · 8bbd3bb · 8bbd3bb
1 parent 69f5ea0
commit 8bbd3bb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/demo-test.html b/demo-test.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>DEMO - test</title>
+    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript" src="mvvm.js"></script>
+</head>
+<body>
+
+</body>
+<script type="text/javascript">
+    var $vdom = $([
+            '<div id="test">',
+            '<input type="text" class="form-control validate[required]" name="source_name" id="source_name" maxlength="60" v-model="name">',
+            '</div>'
+    ].join(''));
+    var data = JSON.parse(
+            '{"propId":"sourcee1aaebb88ff64ef48fb42cffa6d21142","type":1,"source":"","name":"环境监控","stream":"env_monitor","nid":"14E8DE02-76AE-4D86-87C3-2FE579051498"}'
+    );
+    var vm = new MVVM({
+        el: $vdom.get(0),
+        data: data
+    });
+
+</script>
+</html>
diff --git a/demo.html b/demo.html
@@ -8,6 +8,7 @@
             font-weight: bold;
         }
     </style>
+    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     <script type="text/javascript" src="mvvm.js"></script>
     <!--<script src="//cdn.bootcss.com/vue/2.2.6/vue.common.min.js"></script>-->
     <!--<script src="//cdn.bootcss.com/vue/2.2.6/vue.runtime.min.js"></script>-->
@@ -18,7 +19,7 @@
             <textarea v-model="desc"></textarea>
         </p>
         <p>
-            <input type="text" v-model="user.name"/>
+            <input type="text" id="test" v-model="user.name"/>
         </p>
         <p v-class="clazzName" v-html="descHtml"></p>
         <p v-text="descText"></p>

diff --git a/mvvm.js b/mvvm.js
@@ -507,6 +507,9 @@ var MVVM = (function () {
         }
 
         MVVM.prototype = {
+            $watch: function(key, cb){
+                new Watcher(this, key, cb);
+            },
             _proxy: function (key) {
                 var thiz = this;
                 Object.defineProperty(thiz, key, {