Jouryjc
diff --git a/‎vue/examples/diff/different-vnode.html‎
Lines changed: 59 additions & 0 deletions b/‎vue/examples/diff/different-vnode.html‎
Lines changed: 59 additions & 0 deletions
diff --git a/‎vue/examples/diff/index.html‎
Lines changed: 53 additions & 0 deletions b/‎vue/examples/diff/index.html‎
Lines changed: 53 additions & 0 deletions
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>DIFFERENT-TAG-VNODE-DIFF</title>       
+    <script src="../../dist/vue.js"></script>
+    <style>
+        .red {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <Child :has-changed="hasChanged"></Child>
+        <button @click="change">toggle</button>
+    </div>
+
+    <script type="text/x-template" id="Child">
+        
+            <div v-if="hasChanged">Hello, Vue</div>
+            <p v-else>
+                <span class="red">Hello, Jour</span>
+            </p>
+        
+    </script>
+
+    <script>
+        Vue.component('Child', {
+            props: ['hasChanged'],
+               
+            template: '#Child'
+        });
+
+        new Vue({
+            el: '#app',
+
+            name: 'App',
+
+            Components: {
+                Child
+            },
+
+            data: function () {
+                return {
+                    hasChanged: true
+                };
+            },
+
+            methods: {
+                change () {
+                    this.hasChanged = !this.hasChanged;
+                }
+            }
+        })
+    </script>
+</body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>VNODE-DIFF</title>       
+    <script src="../../dist/vue.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <ul>
+            <li v-for="item of myArr" :key="item.id">
+                {{ item.text }}
+            </li>
+        </ul>
+        <button @click="change">toggle</button>
+    </div>
+    <script>
+        new Vue({
+            el: '#app',
+
+            data: function () {
+                return {
+                    myArr: [{
+                        id: 1,
+                        text: 'a'
+                    }, {
+                        id: 2,
+                        text: 'b'
+                    }, {
+                        id: 3,
+                        text: 'c'
+                    }, {
+                        id: 4,
+                        text: 'd'
+                    }]
+                };
+            },
+
+            methods: {
+                change () {
+                    this.myArr.splice(1, 1, {
+                        id: 5,
+                        text: 'e'
+                    });
+
+                    this.myArr = this.myArr.reverse();
+                }
+            }
+        })
+    </script>
+</body>
+</html>