diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-11.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-11.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fb47088b46a40bcd68ea09db01071e2a282cb082
--- /dev/null
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-11.md"
@@ -0,0 +1,28 @@
+
+## 用Linux下载CLI
+下面的操作要在设置好环境变量下完成
+```
+第一步：
+```
+![](./img/2021-06-11-07.png)
+
+```
+第三步：
+```
+![](./img/2021-06-11-08.png)
+
+```
+第四步：下载CLI执行如图操作
+```
+![](./img/2021-06-11-09.png)
+
+```
+第五步：
+```
+![](./img/2021-06-11-10.png)
+
+```
+第六步：
+```
+
+![](./img/2021-06-11-11.png)
\ No newline at end of file
diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-12.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4d1aee20bb2188b3824f9ddf061209c550b1bf24
--- /dev/null
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-12.md"
@@ -0,0 +1,163 @@
+
+## 用Vue CLI编写代码之前要执行的操作
+```
+第一步：
+```
+![](./img/2021-06-12_img1.png)
+
+```
+第二步：
+```
+![](./img/2021-06-12_img2.png)
+
+```
+第三步：
+```
+![](./img/2021-06-12_img3.png)
+## 用Vue CLI编写代码
+1. App.vue文件
+```
+<template>
+  <div id="app">
+    <img  alt="">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!-- 这里为了避免与HTML别的标签冲突所以用小写或者‘-’(这个用来隔断大小写)区分 -->
+    <abc title="欢迎光临！"></abc>    
+  </div>
+</template>
+
+<script>
+//这里用来连接创建的Vue组件
+import HelloWorld from './components/HelloWorld.vue'
+import Abc from './components/Title.vue'     
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    Abc
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+```
+
+2. HelloWorld.vue文件
+```
+<template>
+<h1>茶市</h1>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
+```
+
+3. Title.vue文件
+```
+<template>
+<div>
+    <h2>{{title}}</h2>
+    <table>
+        <th>
+            <td>编号</td>
+            <td>名称</td>
+            <td>产地</td>
+            <td>价格</td>
+            <td>功效</td>
+        </th>
+        <tr v-for="item in list" :key="item.id">
+            <td>{{item.id}}</td>
+            <td>{{item.teaname}}</td>
+            <td>{{item.origin}}</td>
+            <td>{{item.price}}</td>
+            <td>{{item.efficacy}}</td>
+        </tr>
+      
+    </table> 
+</div>
+
+</template>
+
+<script>
+export default {
+    props:{
+        title:{
+            type:String
+        }
+    },
+  data: function () {
+    return {
+      list: [
+        {
+          id: 1,
+          teaname: "铁观音",
+          origin: "福建",
+          price: "1000",
+          efficacy: "降血压",
+        },
+        {
+          id: 1,
+          teaname: "龙井茶",
+          origin: "浙江",
+          price: "2000",
+          efficacy: "抗疲劳",
+        },
+        {
+          id: 1,
+          teaname: "普洱",
+          origin: "云南",
+          price: "500",
+          efficacy: "减肥",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+tr{
+    color: rgb(42, 181, 245);
+    font-size: 2rem;
+}
+
+td{
+    margin-left: 10rem;
+    display: inline-block;
+}
+</style>
+```
\ No newline at end of file
diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-5.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-5.md"
index ff08a0d1dc71a8fe2eb10fc224ec9a5e5651cd60..896861175eb4bd68266d83ae908aa5f07a60c385 100644
--- "a/\350\201\202\350\215\243\347\247\200/2021-6-5.md"
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-5.md"
@@ -81,7 +81,7 @@
     </script>
 </body>
 ```
-
+## 单选框
 ```
 <body>
     <div id="app">
diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-8.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-8.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cdb836ca52b699f97f62dd1fef8119c99120f2db
--- /dev/null
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-8.md"
@@ -0,0 +1,28 @@
+
+## 组件用法和复用
++ 组件是可以复用Vue实例，所以它与新建一个Vue实例可以接收相同的选项(data、computed、watch、methods和生命周期、钩子等);
++ 一个组件的data选项必须是一个函数，所以每个组件都会独立维护它的count，你每使用一次组件就会有一个新实例被创建
++ 组件必须先注册便于Vue能够识别，有两种组件注册类型：全局注册和局部注册，我们一般用Vue.component全局注册
+```
+<body>
+    <div id="app">
+        <button-counter></button-counter>
+        <button-counter></button-counter>
+        <button-counter></button-counter>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+    <script>
+        Vue.component('button-counter',{
+            data:function(){
+                return {
+                    count:0
+                }
+            },
+            template:`<button @click="count++">你点了{{count}}下</button>`
+        })
+        let app=new Vue({
+            el:'#app'
+        })
+    </script>
+</body>
+```
diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-9.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-9.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d004a7705d889d1dd77edd5479c812d32cd7d973
--- /dev/null
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-9.md"
@@ -0,0 +1,59 @@
+
+## Vue CLI下载
+```
+第一步：打开PowerShell
+```
+![](./img/2021-06-09-02.png)
+
+```
+第二步：进去按图片做
+```
+![](./img/2021-06-09-01.png)
+
+```
+第三步：等下载完成后打开环境变量
+```
+![](./img/2021-06-09-03.png)
+
+```
+第四步：设置环境变量
+```
+![](./img/2021-06-09-04.png)
+
+```
+第五步：确定环境变量
+```
+![](./img/2021-06-09-05.png)
+
+```
+第六步：重启PowerShell
+```
+![](./img/2021-06-09-02.png)
+
+```
+第七步：开始创建
+```
+![](./img/2021-06-09-06.png)
+
+```
+第八步：选择vue版本
+```
+![](./img/2021-06-09-07.png)
+
+```
+第九步：下载完成
+```
+![](./img/2021-06-09-08.png)
+![](./img/2021-06-09-09.png)
+
+```
+第十步：运行项目
+```
+![](./img/2021-06-09-10.png)
+
+```
+第十一步： 出现网址 并且打开就可以用CLI了
+```
+![](./img/2021-06-09-11.png)
+![](./img/2021-06-09-12.png)
+
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-01.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2bb3b427fbe11dac7bbf2f20c8194e75839420f6
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-01.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-02.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-02.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fd1e712b306e794d50f79a21ae5048aca8176184
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-02.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-03.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-03.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b88878f3fe971a51c1fd1afd14280f08af7bc40e
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-03.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-04.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-04.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c091e4b14d15e8b6bbd8a82220ed532ea02b664a
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-04.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-05.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-05.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c28efa2fa5e8fa51c991e5deba9e553b56549423
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-05.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-06.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-06.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e513547343bab5b71f1e07ff203b628fa33889c6
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-06.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-07.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-07.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e82b22ea43f94d45394a998e60b26be3476d0ace
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-07.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-08.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-08.png"
new file mode 100644
index 0000000000000000000000000000000000000000..86998f3c66ace52eb8d27c05e70bd9299c85bd82
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-08.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-09.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-09.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f38cf98f28c6b16777ba4367396bb23adda063c1
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-09.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-10.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b743d2556d5e943f08ac3ebfe027906543fbfb6f
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-10.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-11.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..99fae2a84b15873443183151894d65f903616f74
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-11.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-09-12.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-12.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9aee42f17af80f8bf19211c49102f777f37bcdfd
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-09-12.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-11-07.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-07.png"
new file mode 100644
index 0000000000000000000000000000000000000000..98da3cf4298dbcf1b2a7dc777dd8ca2e41d5fd5f
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-07.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-11-08.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-08.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2c8a4ab4f7bbfd180111186ff8b82d1ee560dc70
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-08.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-11-09.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-09.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2d8c1efe8d104c970a9ee3ee290ab33361b153e0
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-09.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-11-10.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f6061e2826d81f0d0ce38ffd3ffaa7ed90e42ac7
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-10.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-11-11.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0a06269ded2e210c6dc8c779ab505118fe012c0a
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-11-11.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img1.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..418f908c5a19f446bede9f459653addb2530143d
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img1.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img2.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aa20aeba9f4182117d640742b1ee3df001d50eab
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img2.png" differ
diff --git "a/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img3.png" "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9930f52da0ac8e98a15f7aeb59f32093ade229f7
Binary files /dev/null and "b/\350\201\202\350\215\243\347\247\200/img/2021-06-12_img3.png" differ

+	编号	名称	产地	价格	功效
{{item.id}}	{{item.teaname}}	{{item.origin}}	{{item.price}}	{{item.efficacy}}