diff --git a/动态组件.html b/动态组件.html
new file mode 100644
index 0000000..82d3bfd
--- /dev/null
+++ b/动态组件.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+    <div id="itany">
+      <button @click="flag='my-hello'">显示hello组件</button>
+      <button @click="flag='my-world'">显示world组件</button>
+      <div>
+        <keep-alive>
+          <component :is="flag"></component>
+        </keep-alive>
+      </div>
+    </div>
+    <script>
+      var vm = new Vue({
+        el: '#itany',
+        data: {
+          flag: 'my-hello'
+        },
+        components: {
+          'my-hello': {
+            template: '<h3>我是hello组件：{{x}}</h3>',
+            data(){
+              return {
+                x: Math.random()
+              }
+            }
+          },
+          'my-world': {
+            template: '<h3>我是world组件: {{y}}</h3>',
+            data(){
+              return {
+                y: Math.random()
+              }
+            }
+          }
+        }
+      })
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/组件.html b/组件.html
new file mode 100644
index 0000000..fb2cd9b
--- /dev/null
+++ b/组件.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+      <div id="example-1">  
+        <my-component></my-component>
+        <my-demo></my-demo>
+      </div>
+
+      <div id="example-2">
+        <simple-counter></simple-counter>
+        <simple-counter></simple-counter>
+        <simple-counter></simple-counter>
+      </div>
+
+      <div id="counter-event-example">
+        <p>{{total}}</p>
+        <button-counter v-on:increment="incrementTotal"></button-counter>
+        <button-counter v-on:increment="incrementTotal"></button-counter>
+
+      </div>
+   
+    <script>
+      var Child = {
+        template: '<div>A custom component! </div>'
+      }
+      var Demo = {
+        template: '<div>A demo</div>'
+      }
+
+      new Vue({
+        el: '#example-1',
+        components: {
+          'my-component': Child,
+          'my-demo': Demo
+        }
+      })
+
+      var data = {counter: 0}
+      Vue.component('simple-counter', {
+        template: '<button v-on:click="counter += 1">{{counter}}</button>',
+        data: function(){
+          return {counter: 0}
+        }
+      })
+      new Vue({
+        el: '#example-2'  
+      })
+
+      Vue.component('button-counter', {
+        template: '<button v-on:click="increment">{{ counter }}</button>',
+        data: function() {
+          return {counter: 0}
+        },
+        methods: {
+          increment: function(){
+            this.counter += 1
+            this.$emit("increment")
+          }
+        }
+      })
+
+      new Vue({
+        el: '#counter-event-example',
+        data: {
+          total: 0
+        },
+        methods: {
+          incrementTotal: function(){
+            this.total += 1
+          }
+        }
+      })
+    </script>
+  </body>
+</html>
\ No newline at end of file
