diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.08.md" "b/\350\260\242\351\225\277\344\270\234/2020.6.08.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0e325ad26dfa148df63665bf6c25d84031364f68
--- /dev/null
+++ "b/\350\260\242\351\225\277\344\270\234/2020.6.08.md"
@@ -0,0 +1,77 @@
+### 组件
+```html
+    <div id="box">
+        <nvdh></nvdh>
+        
+    </div>
+    <script>
+
+        /* 组件
+        注意:   1.起名字：    js驼峰，html 连接符 "-";都是小写就没什么问题
+                2.dom片段   没有代码提示，没有高亮显示。（vue单文件组件解决）
+                3.css       只能写在行内（vue单文件组件解决）
+                4.template  包含一个根节点，如果存在兄弟节点就会报错
+                5.组件是单独的，无法【直接】访问外面的组件的状态或者方法（间接的组件通信来交流）
+                6.自定义组件data必须是一个函数
+                7.所有组件都在一起，太乱了（vue单文件组件解决）
+        */
+
+        /* 
+        根组件
+        new Vue({
+            el:'#box'//根组件的模板
+        
+        })
+        
+        */
+
+
+        Vue.component('nvdh', {
+            template: `
+            <div  style="background-color: red;">
+            <button @click='handehome()' >首页</button>
+            <span>导航栏</span>--{{value}}--{{name}}
+            <child></child>
+            <nvdh-child></nvdh-child>
+            <button @click='handeoself()'>个人</button>
+            </div>
+            `,
+            components: {
+                'nvdhChild':{
+                    template:`<div>nvdhChild</div>`
+                }
+            },
+            methods: {
+                handehome() {
+                    console.log('首页')
+                },
+                handeoself() {
+                    console.log('个人')
+                }
+            },
+            computed: {
+                value() {
+                    return '哈哈哈'
+                }
+            },
+            watch: {
+
+            },
+            data() {
+                return {
+                    name: 'child-name'
+                }
+            },
+
+        })
+
+        Vue.component('child', {
+            template: `<div>child</div>`
+        })
+
+        new Vue({
+            el: '#box',
+
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.09.md" "b/\350\260\242\351\225\277\344\270\234/2020.6.09.md"
new file mode 100644
index 0000000000000000000000000000000000000000..75c36c3a844a077f1a7239a7e1f6fc368724aaa0
--- /dev/null
+++ "b/\350\260\242\351\225\277\344\270\234/2020.6.09.md"
@@ -0,0 +1,91 @@
+## 组件通信
+vue组件之间通信的8种方式
+对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。
+
+- props和$emit(常用)
+- $attrs和$listeners
+- 中央事件总线（非父子组件间通信）
+- v-model
+- provide和inject
+- $parent和$children
+- vuex
+
+
+1.props和$emit
+
+ 　　父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.
+
+ 中央事件总线
+
+ ```html
+ <div id="box">
+        <child1></child1>
+        <child2></child2>
+    </div>
+
+    <script src="../lib/vue.js"></script>
+    <script>
+        //中央事件总线
+        let bus=new Vue()//空的vue
+
+
+        Vue.component('child1',{
+            template:`
+                <div>
+                    child1--{{msg}}
+                    <button @click='handlclick'>详情</button>
+                </div>
+            `,
+            data() {
+                return {
+                    msg:'嘿吼嘿吼，child1'
+                }
+            },
+            methods: {
+                handlclick(){
+                    bus.$emit('getmsg',this.msg)
+                }
+            },
+        })
+
+        Vue.component('child2',{
+            template:`
+                <div>
+                    child2---{{msg}}
+                    <child22></child22>
+                </div>
+            `,
+            data() {
+                return {
+                    msg:''
+                }
+            },
+            mounted() {
+                bus.$on('getmsg',(data)=>{
+                    this.msg+=data+'--'
+                })
+            },
+            components:{
+                'child22':{
+                    template:`
+                    <div>child2的子组件>>{{msg}}</div>
+                    `,
+                    data() {
+                        return {
+                            msg:''
+                        }
+                    },
+                    mounted() {
+                        bus.$on('getmsg',(data)=>{
+                            this.msg+=data+'>>'
+                        })
+                    },
+                }
+            }
+        })
+
+        new Vue({
+            el:'#box'
+        })
+    </script>
+ ```
\ No newline at end of file
diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.11.md" "b/\350\260\242\351\225\277\344\270\234/2020.6.11.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5893c57b83a7d2fcf46f4f3212acbab7a3520b98
--- /dev/null
+++ "b/\350\260\242\351\225\277\344\270\234/2020.6.11.md"
@@ -0,0 +1,18 @@
+## vue-cli
+vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
+
+#### 安装
+```
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+#### 创建命令
+```
+vue create hello-world
+```
+
+#### vue serve 启动项目
+
+#### vue build 将目标文件构建成一个生产环境的包
\ No newline at end of file
diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.12.md" "b/\350\260\242\351\225\277\344\270\234/2020.6.12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f752482ad3c52167caf0a6fee5e1814b8a9d36e9
--- /dev/null
+++ "b/\350\260\242\351\225\277\344\270\234/2020.6.12.md"
@@ -0,0 +1,113 @@
+## 单文件组件
+
+1. 什么是单文件组件：
+
+把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件
+
+2. 最简单使用
+
+通过Vuecli创建一个空的项目并运行
+创建单文件组件 src/component/01.单文件组件.vue
+src/main.js 文件中导入、注册组件
+public/index.html 文件 使用 单文件组件
+
+
+
+## style标签
+如果我们直接在`<style></style>`标签中写自己的样式，我们发现，只要选择器相同就会影响其他组件的样式
+- 加上scoped属性，css局部生效
+- 加上lang=“scss,支持scss
+### scoped属性
+表示当前style 里的样式只属于当前模块。（作用域、私有化的思想）
+scoped的渲染规则：
+- 给html的dom节点添加一个不重复的data属性（例如：data-v-555831a)来唯一标识这个dom元素
+- 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
+
+
+## scss(CSS预处理语言)
+ 定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
+### 注释
+`注释分为三种：/* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。`
+
+### 变量
+全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；
+
+默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值
+```scss
+$value: 300px;//全局
+$color:rgb(0, 183, 255);
+$siz: 50px !default;//默认变量
+
+li {
+  background: orange;
+  width: $value;
+    $num:30px;//局部变量
+  font-size: $num;
+
+}
+```
+
+### 嵌套
+```html
+    <div class="cla">
+      <h2>列表 <span>span标签</span></h2>
+      <h2>列表2</h2>
+    </div>
+```
+```scss
+.cla {
+  h2 {
+    span {
+      background: orchid;
+    }
+    color: red;
+  }
+}
+```
+选择器`.cla h2`中的字体颜色都是`red`,然后h2的子标签的背景设为`orchid`
+### 继承(@extend)
+```html
+<div id="jc">
+    <div class="cl1"><span>背景为黄色，字体20px</span></div>
+    <div class="cl2">背景为黄色，字体20px，加上一个宽为200的边框</div>
+</div>
+```
+```scss
+.cl1{
+   background-color: orange;
+   font-size: 20px;
+   color: blue
+}
+
+.cl2{
+  @extend .cl1;
+  margin-top: 10px;
+  width:200px;
+  color: aqua;
+  border: 1px solid red;
+}
+```
+优先原则：`继承< scss站位符 < 本身`
+继承过来的样式可以再次修改
+
+### SCSS占位符 %
+使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。
+
+优先原则：`继承< scss站位符 < 本身`
+```scss
+%color{
+  color: chartreuse;
+  font-family: '微软雅黑'
+}
+.cl2{
+  @extend %color;
+  @extend .cl1;
+  margin-top: 10px;
+  width:200px;
+//   color: purple;
+  border: 1px solid red;
+}
+```
+
+
+[scss更多用法](https://blog.csdn.net/zhouzuoluo/article/details/81010331)
\ No newline at end of file
diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.1.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.01.md"
similarity index 100%
rename from "\350\260\242\351\225\277\344\270\234/2021.6.1.md"
rename to "\350\260\242\351\225\277\344\270\234/2021.6.01.md"
diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.2.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.02.md"
similarity index 100%
rename from "\350\260\242\351\225\277\344\270\234/2021.6.2.md"
rename to "\350\260\242\351\225\277\344\270\234/2021.6.02.md"
diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.4.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.04.md"
similarity index 100%
rename from "\350\260\242\351\225\277\344\270\234/2021.6.4.md"
rename to "\350\260\242\351\225\277\344\270\234/2021.6.04.md"
diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.5.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.05.md"
similarity index 100%
rename from "\350\260\242\351\225\277\344\270\234/2021.6.5.md"
rename to "\350\260\242\351\225\277\344\270\234/2021.6.05.md"