diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..86a435fb232a4655ffb405fab2e7ea07bc2994da
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md"	
@@ -0,0 +1,108 @@
+## Vue.js 第五节课 (组件基础)
+
++ 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码
+
+## 一、全局组件  Vue.component()
+
+```
+Vue.component('good',{
+        template:'<h1>good nice<h1>'
+    })
+```
+
+1. 设置Vue的接管范围
+
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World</title>
+    <script src="Vue.js"></script>
+</head>
+<body>
+    <div id="vm">
+        <hello></hello>
+    </div>
+</body>
+<script>
+    Vue.component('hello',{
+        template:'<h1>hello world<h1>'
+    })
+ 
+    new Vue({
+        el:'#vm'
+    })
+</script>
+</html>
+```
+
+## 二、局部组件
+
+1. 先在外部声明，然后在Vue实例中实例化
+```
+var hello={
+        template:'<h1>hello world</h1>'
+    }
+    var app=new Vue({
+        el:'#app',
+        components:{
+            hello:hello       //在此处生成局部组件两个hello可以不同
+        }
+    })
+```
+
+## 二、动态组件(组件切换)
+
+1. 父组件向子组件传值
+
++ <slot></slot>传值
+
++ <hello></hello>里面的hiboy会传递到子组件中替代slot
+
+2. 子组件向父组件传值
+
++ 子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个
+
+```
+<body>
+    <div id="app">
+        <hello @addnum="handleAddClick"></hello><!-- 接收子节点传过来的值 -->
+        <h3>{{num}}</h3>
+    </div>
+</body>
+<script>
+    Vue.component('hello',{
+        data:function(){                              //组件的data为一个函数
+            return{
+                number:0
+            }
+        },
+        template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
+        methods:{
+            handleClick:function(){
+                //这里点击一次我们让自身加一
+                this.number++;
+                //向上传递事件给父节点
+                this.$emit('addnum',1);//第一个参数为事件名，第二个为所需要传的值，这里我们传1，当然可以传多个值
+            }
+        }
+    })
+    var app=new Vue({
+        el:'#app',
+        data:{
+            num:0
+        },
+        methods:{
+            handleAddClick:function(step){
+                this.num+=step;
+            }
+        }
+    })
+</script>
+```
+注意：组件的data是一个函数通过返回值来实现
+
+通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容，
+
+this.$refs.one.number获取了组件中的number
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b29e1d818fab48e0057b97971078a78359f8f0ca
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md"	
@@ -0,0 +1,16 @@
+## Vue Lci
+
+1. 修改linux文件权限
+
+2. chmod -R 777 文件夹名/
+
+3. 修改Host文件
+
+4. 修改 host 权限
+
+5. 右键-属性-安全-高级-更改权限-添加-选择主体-高级-立即查找-选择Administrator-保存
+
+```
+// host 文件位置
+C:\Windows\System32\drivers\etc
+```
\ No newline at end of file
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html"
new file mode 100644
index 0000000000000000000000000000000000000000..18d5f6d1287698da63d3956f93c57eb7fc20aecf
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html"
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="dynamic-component-dome" class="dome">
+        <!-- <my-component></my-component> -->
+        <!-- <alert-box>
+            Something bad happened.
+          </alert-box> -->
+
+        <button 
+            v-for="" v-bind:key="tab" v-bind:class="['tab-button',{active:currentTab === tab}]" v-on:click="currentTab=tab">
+          {{tab}}
+        </button>
+        <component v-bind:is="currentTabComponent" class="="tab>
+            
+        </component>
+    </div>
+
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+    <script>
+        // 注册
+        Vue.component('alert-box', {
+            template: `
+            <div class="demo-alert-box">
+            <strong>Error!</strong>
+            <slot></slot>
+            </div>
+        ` 
+        })
+        let app = new Vue({
+            el: "#app",
+            data: {
+
+            }
+        })
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
