diff --git "a/\346\235\250\345\213\207/2020-06-08\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\346\235\250\345\213\207/2020-06-08\347\273\204\344\273\266\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a4c1c6898c544b23619be5706b783db69f669059
--- /dev/null
+++ "b/\346\235\250\345\213\207/2020-06-08\347\273\204\344\273\266\345\237\272\347\241\200.md"
@@ -0,0 +1,158 @@
+# 组件
+
+### 通过 Prop 向子组件传递数据
+
+```
+
+  <div id="app">
+    <btn v-for='item in student' v-bind:key='item.id' :item='item'>
+    </btn>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+  <script>
+    Vue.component('btn', {
+      props: ['item'],
+      template: `<li >{{item.name}}</li>`
+    });
+    let app = new Vue({
+      el: '#app',
+      data: {
+        student: [
+          {
+            id: 1,
+            name: '小黑'
+          },
+          {
+            id: 2,
+            name: '小黑1'
+          },
+          {
+            id: 3,
+            name: '小黑2'
+          },
+          {
+            id: 4,
+            name: '小黑3'
+          },
+        ]
+      }
+    })
+  </script>
+
+```
+//利用prop获得组件中传入的数据，然后传入子组件供其使用
+
+### 单个根元素
+
++ 每个组件在template中所包含的根元素必须只有一个，如果有多个根元素，可以通过建立一个根元素的父元素将之包含起来
+
+
+```
+  <div id="app">
+    <blog-post v-for='item in list' :post='item' :key='item.id'>
+
+    </blog-post>
+    </btn>
+  </div>
+
+  <script>
+    Vue.component('blog-post', {
+      props: ['post'],
+      template: `
+      <div>//父元素
+  <h1>
+    {{post.title}}
+  </h1>
+  <div v-html='post.content' style="font-size: 200px;" >  
+  </div>
+</div>
+      
+      `
+    });
+    let app = new Vue({
+
+      el: '#app',
+      data: {
+        list: [{
+          id: 1,
+          title: '小红',
+          content: '啊啊'
+        }
+          , {
+          id: 2,
+          title: '小黄',
+          content: '哈哈'
+        }
+        ],
+
+      }
+
+    })
+  </script>
+```
+
+### 利用$emit来传入事件名称来触发另一个事件
+
++ 利用$emit传入了@dl事件，并触发了dosomething事件，其中dosomething事件所具有的两参数一个为父组件所带有的index，一个为子组件所传入的@event也就是11，所以利用@emit可以使父子组件
+之间的元素进行传递
+```
+  <div id="app">
+    <input type="text" v-model='list.title'>
+    <blog-post v-for='(item,index) in list' :post='item' :key='item.id' @dl=dosomething(index,@event)>
+    </blog-post>
+    </btn>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+  <script>
+    Vue.component('blog-post', {
+      props: ['post'],
+      template: `
+      <li> <div v-html='post.content' style="font-size: 20px;" >  </div><input type="button" value="删除" @click="$emit('dl',11)"></li>
+      
+      `
+    });
+    let app = new Vue({
+
+      el: '#app',
+      data: {
+        list: [{
+          id: 1,
+          title: '小红',
+          content: '啊啊'
+        }
+          , {
+          id: 2,
+          title: '小黄',
+          content: '哈哈'
+        }
+          , {
+          id: 3,
+          title: '小绿',
+          content: '嘻嘻'
+        }
+          , {
+          id: 4,
+          title: '小黑',
+          content: '呼呼'
+        }
+        ],
+
+      },
+      methods:{
+       dosomething:function(index,event){
+
+         console.log(111);
+         console.log(event);
+         this.list.splice(index,1)
+       }
+      }
+
+    })
+  </script>
+```
+
++ 每日一点小进步：v-html可以使用样式以及特殊标签而不会被转意为文本，v-text则不使用样式，全转意为文本
+
+
+
diff --git "a/\346\235\250\345\213\207/2020-06-09\346\211\213\350\204\232\346\236\266\344\275\277\347\224\250.md" "b/\346\235\250\345\213\207/2020-06-09\346\211\213\350\204\232\346\236\266\344\275\277\347\224\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..58e6e1465c836b73dfd01ab873d5260ff835484f
--- /dev/null
+++ "b/\346\235\250\345\213\207/2020-06-09\346\211\213\350\204\232\346\236\266\344\275\277\347\224\250.md"
@@ -0,0 +1,34 @@
+## @vue/cli 操作步骤
+
+1. 安装淘宝镜像，将npm上的模块同步到国内服务器，提高安装模块的速度
+```
+npm config set registry https://registry.npm.taobao.org
+```
+
+2. 全局安装yarn以及@vue/cli脚手架
+```
+npm i -g @vue/cli yarn
+```
+
+3. 查看vue是否已安装
+```
+vue
+```
+
+4. 创建文件
+```
+进入d盘：
+d:
+创建文件夹：
+mkdir 文件名
+进入文件夹：
+cd 文件名
+vue create 文件内再建的项目名
+```
+
+5. 如果需要让服务器启动，则需要
+```
+cd 项目名
+yarn serve//启动服务器
+```
+
diff --git "a/\346\235\250\345\213\207/2020-06-10.\345\220\214\344\270\212md" "b/\346\235\250\345\213\207/2020-06-10.\345\220\214\344\270\212md"
new file mode 100644
index 0000000000000000000000000000000000000000..58e6e1465c836b73dfd01ab873d5260ff835484f
--- /dev/null
+++ "b/\346\235\250\345\213\207/2020-06-10.\345\220\214\344\270\212md"
@@ -0,0 +1,34 @@
+## @vue/cli 操作步骤
+
+1. 安装淘宝镜像，将npm上的模块同步到国内服务器，提高安装模块的速度
+```
+npm config set registry https://registry.npm.taobao.org
+```
+
+2. 全局安装yarn以及@vue/cli脚手架
+```
+npm i -g @vue/cli yarn
+```
+
+3. 查看vue是否已安装
+```
+vue
+```
+
+4. 创建文件
+```
+进入d盘：
+d:
+创建文件夹：
+mkdir 文件名
+进入文件夹：
+cd 文件名
+vue create 文件内再建的项目名
+```
+
+5. 如果需要让服务器启动，则需要
+```
+cd 项目名
+yarn serve//启动服务器
+```
+
diff --git "a/\346\235\250\345\213\207/2020-06-12.md" "b/\346\235\250\345\213\207/2020-06-12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 15-15-13.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 15-15-13.JPG"
deleted file mode 100644
index 56f83ccff07f88b6099cb23648edb6a671c1d486..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 15-15-13.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 15-32-40.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 15-32-40.JPG"
deleted file mode 100644
index 981f7a955482c543728cc9ad8267cf7df8b8ebb7..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 15-32-40.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 15-36-43.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 15-36-43.JPG"
deleted file mode 100644
index 58ee373c0180eca735a8fbd6f4c20d528db388a2..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 15-36-43.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 15-8-4.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 15-8-4.JPG"
deleted file mode 100644
index 2975692879fecaaa78d1afbb2466396845f8acf6..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 15-8-4.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 16-14-32.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 16-14-32.JPG"
deleted file mode 100644
index ff09d7cd7b07edea4b6326af23ed41b0f0a02bf8..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 16-14-32.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/img/2021-5-29 16-4-36.JPG" "b/\346\235\250\345\213\207/img/2021-5-29 16-4-36.JPG"
deleted file mode 100644
index b3e486a23018470e073dd94a42412f96a69a084f..0000000000000000000000000000000000000000
Binary files "a/\346\235\250\345\213\207/img/2021-5-29 16-4-36.JPG" and /dev/null differ
diff --git "a/\346\235\250\345\213\207/index.html" "b/\346\235\250\345\213\207/index.html"
index dc85c51d6bb5c265da1c1f21d1701a3b861fcce6..18c029f027d362370f2a1ac84ca327182b1666f3 100644
--- "a/\346\235\250\345\213\207/index.html"
+++ "b/\346\235\250\345\213\207/index.html"
@@ -10,30 +10,56 @@
 <body>
 
   <div id="app">
-    <select name="" id="" v-model='selected' @change='oncheck'>
-      <option v-model='options' v-for="option in options" :value="option.value" >{{option.text}}
-      </option>
-    </select>
-    <label for="">Selects:{{selected}}</label>
+    <input type="text" v-model='list.title'>
+    <blog-post v-for='(item,index) in list' :post='item' :key='item.id' @dl=dosomething(index,$event)>
+    </blog-post>
+    </btn>
   </div>
-
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
   <script>
+    Vue.component('blog-post', {
+      props: ['post'],
+      template: `
+      <li> <div v-html='post.content' style="font-size: 20px;" >  </div><input type="button" value="删除" @click="$emit('dl',11)"></li>
+      
+      `
+    });
     let app = new Vue({
+
       el: '#app',
       data: {
-        selected:'A',
-        options: [
-          { text: 'One', value: 'A' },
-          { text: 'Two', value: 'B' },
-          { text: 'Three', value: 'C' }
-        ]
-      },
-      methods: {
-        oncheck: function () {
-          console.log(this.selected);
+        list: [{
+          id: 1,
+          title: '小红',
+          content: '啊啊'
+        }
+          , {
+          id: 2,
+          title: '小黄',
+          content: '哈哈'
+        }
+          , {
+          id: 3,
+          title: '小绿',
+          content: '嘻嘻'
         }
+          , {
+          id: 4,
+          title: '小黑',
+          content: '呼呼'
+        }
+        ],
+
+      },
+      methods:{
+       dosomething:function(index,event){
+
+         console.log(111);
+         console.log(event);
+         this.list.splice(index,1)
+       }
       }
+
     })
   </script>
 </body>