diff --git "a/\351\273\204\346\231\250\347\203\250/2021-06-09.md" "b/\351\273\204\346\231\250\347\203\250/2021-06-09.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7ed8b504e3d0b740498fbacf8c53ef46e1fb04d8
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/2021-06-09.md"
@@ -0,0 +1,49 @@
+## 安装vue
++ 安装vue前yarn是否已安装
++ 若没有安装，利用淘宝镜像快速安装yarn
+```
+1.yarn config get registry
+2.yarn config set registry https://registry.npm.taobao.org/
+3.npm i -g yarn
+4.yarn global add @vue/cli
+```
++ 环境变量path 浏览 用户、appdata、yarn
++ 新建文件夹
+```
+mdkir 文件名
+```
++ 创建项目
+```
+vue create 项目名
+```
++ 选择vue2,yarn
++ 终止项目
+
+## VSCode打开项目
++ 压缩 yarn build 生成dist文件
+
+## 登录xshell(部署项目)
++ cd /var/www
++ ll
++ mkdir hcy.top
++ chomd -R 777 hcy.top
++  配置文件 cd /etc/nginx/conf.d
+```
+server{
+  listen 80;
+  server_name hcy.top;
+  location /{
+      root /var/www/hcy.top;
+      index index.html;
+  }
+
+}
+```
++ nginx -t
++ nginx -s reload 
+## 修改权限
+```
+
+1.C:\Windows\System32\etc
+2.host属性 添加 主机名 + 域名
+```
\ No newline at end of file
diff --git "a/\351\273\204\346\231\250\347\203\250/2021.06.08.md" "b/\351\273\204\346\231\250\347\203\250/2021.06.08.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d154dc91763aa7efc367b8532c3dc4486bae99dd
--- /dev/null
+++ "b/\351\273\204\346\231\250\347\203\250/2021.06.08.md"
@@ -0,0 +1,44 @@
+## 深入了解组件
+## 1.组件注册
+  + 构成：一个参数+一个对象
+  + 组件名大小写
+  ```
+  1.帕斯卡命名方式：每个单词的首字母大写
+  2.驼峰命名法：每个单词小写，用"-"连接单词
+  ```
+  + 组件注册分为：全局注册和局部注册
+  ```
+    <div id="app">
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+     Vue.component('todo-item',{
+             data:function(){
+                return{
+                    count:0
+                }
+             },
+          template:`<input type="button" :value="count" @click="count++">`
+
+     })
+    let app=new Vue({
+        el:'#app',
+        data:{
+            
+        }
+    
+    })
+    </script>
+  ```
+   ![](./imgs/count.png)
\ No newline at end of file
diff --git "a/\351\273\204\346\231\250\347\203\250/imgs/count.png" "b/\351\273\204\346\231\250\347\203\250/imgs/count.png"
new file mode 100644
index 0000000000000000000000000000000000000000..79b6ebee7858c7acf4025a066b2a226340ddd0ea
Binary files /dev/null and "b/\351\273\204\346\231\250\347\203\250/imgs/count.png" differ
diff --git "a/\351\273\204\346\231\250\347\203\250/index.html" "b/\351\273\204\346\231\250\347\203\250/index.html"
index db002bcae9214fa882269455823584a1ed8a1c8c..2bbfd0b98a2b120a520a189003771bee4a357ff7 100644
--- "a/\351\273\204\346\231\250\347\203\250/index.html"
+++ "b/\351\273\204\346\231\250\347\203\250/index.html"
@@ -9,108 +9,36 @@
 
 <body>
     <div id="app">
-        <!-- //text、textarea用value属性，input事件 -->
-        <!-- 若用v-model绑定数据，会忽略表单元素的value、checked、selected -->
-        <!-- 一开始在data选项中声明初始值 -->
-        <input type="text" @input="share" v-model="saysay">
-        <textarea name="" id="" cols="30" rows="10" @input="area" v-model="areas"></textarea>
-
-        <!-- checkbox、radio都用change事件，checkbox使用checked属性，radio使用value属性 -->
-        <!-- 单个复选框 -->
-        <input type="checkbox" @change="option" v-model="options">
-
-        <!-- 选择框（多个multiple）按ctr键多选 -->
-        <select name="" id="" multiple v-model="fruits" @change="fruit">
-            <option value="apple">苹果</option>
-            <option value="banna">香蕉</option>
-            <option value="pear">梨子</option>
-            <option value="purple">葡萄</option>
-            <option value="waterMealen">西瓜</option>
-        </select>
-
-
-        <!-- 多个复选框 -->
-        <input type="checkbox" v-model="country" @change="checked" value="1">
-        <input type="checkbox" v-model="country" @change="checked" value="2">
-        <input type="checkbox" v-model="country" @change="checked" value="3">
-        <input type="checkbox" v-model="country" @change="checked" value="4">
-        <input type="checkbox" v-model="country" @change="checked" value="5">
-        <input type="checkbox" v-model="country" @change="checked" value="6">
-
-
-        <!-- 按钮 -->
-        <input type="radio" v-model="radio" value="China" @change="radios">中国
-        <input type="radio" v-model="radio" value="The USA " @change="radios">美国
-        <input type="radio" v-model="radio" value="The UK" @change="radios">英国
-        <input type="radio" v-model="radio" value="Canada" @change="radios">加拿大
-        <input type="radio" v-model="radio" value="Astralia" @change="radios">澳大利亚
-       
-        <!-- 通过循环，输出点击按钮值 -->
-        <div v-for="item in circles">
-            <input type="radio" v-model="skill" :value="item.value" @change="tech">{{item.display}}
-        </div>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        <todo-item>点击次数</todo-item>
+        
     </div>
 
 
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
-        var app = new Vue({
-            el: "#app",
-            data: {
-
-                saysay: '分享点有趣的事情吧',
-                areas: '文本框',
-                options: '',
-                fruits: [],
-                country: [],
-                radio: [],
-                skill: [],
-                circles: [
-                    {
-                        id: 1,
-                        display: "前端",
-                        value: "web"
-                    },
-                    {
-                        id: 2,
-                        display: "后端",
-                        value: "java"
-                    },
-                    {
-                        id: 3,
-                        display: "全栈",
-                        value: "all"
-                    },]
-            },
-            methods: {
-                share: function () {
-                    console.log(this.saysay);
-                },
-                area: function () {
-                    console.log(this.areas);
-                },
-                option: function () {
-                    console.log(this.options);
-                },
-                fruit: function () {
-                    console.log(this.fruits);
-                },
-                checked: function () {
-                    console.log(this.country);
-                },
-                radios: function () {
-                    console.log(this.radio);
-                },
-                tech:function(){
-                    console.log(this.skill);
+     Vue.component('todo-item',{
+             data:function(){
+                return{
+                    count:0
                 }
-
-
-
-
-
-            }
-        })
+             },
+          template:`<input type="button" :value="count" @click="count++">`
+
+     })
+    let app=new Vue({
+        el:'#app',
+        data:{
+            
+        }
+    
+    })
     </script>
 </body>
 
