diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/06-08/1.png" "b/\351\231\206\344\270\207\347\201\257/IMG/06-08/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..308618c25bcacb160266d380cc7ec403ea253e2e
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/06-08/1.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/06-12/1.png" "b/\351\231\206\344\270\207\347\201\257/IMG/06-12/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..15d720296774e74daa091bd4a49b535dbeaf307b
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/06-12/1.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/06-15/1.png" "b/\351\231\206\344\270\207\347\201\257/IMG/06-15/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7e6662fa92a108e799d941fefd71fa73e37e8190
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/06-15/1.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/06-15/\344\273\243\347\240\201.txt" "b/\351\231\206\344\270\207\347\201\257/IMG/06-15/\344\273\243\347\240\201.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..4f10e90368b47f6eed1a22484a8e63467221847f
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/IMG/06-15/\344\273\243\347\240\201.txt"
@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <h1>home</h1>
+        <p>{{msg}}</p>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                msg: "我是home 组件"
+            }
+        }
+    }
+</script>
+
+
+
+
+<template>
+    <div>
+        <h1>about</h1>
+        <p>{{aboutMsg}}</p>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                aboutMsg: '我是about组件'
+            }
+        }
+    }
+</script>
+
+
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <header>
+    <!-- router-link 定义点击后导航到哪个路径下 -->
+      <router-link to="/home">Home</router-link>
+      <router-link to="/about">About</router-link>
+    </header>
+    <!-- 对应的组件内容渲染到router-view中 -->
+    <router-view></router-view>   
+  </div>
+</template>
+ 
+<script>
+export default {
+  
+}
+</script>
+
+
+
+
+import Vue from "vue";
+import VueRouter from "vue-router";
+ 
+// 引入组件
+import home from "./home.vue";
+import about from "./about.vue";
+ 
+// 要告诉 vue 使用 vueRouter
+Vue.use(VueRouter);
+ 
+const routes = [
+    {
+        path:"/home",
+        component: home
+    },
+    {
+        path: "/about",
+        component: about
+    }
+]
+ 
+var router =  new VueRouter({
+    routes
+})
+export default router;
+
+
+
+
+
+import Vue from 'vue'
+import App from './App.vue'
+ 
+// 引入路由
+import router from "./router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
+new Vue({
+  el: '#app',
+  router,  // 注入到根实例中
+  render: h => h(App)
+})
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-08.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-08.md"
new file mode 100644
index 0000000000000000000000000000000000000000..065490c4763b7f261ac61cfb0c6f4a6a3f867372
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-08.md"
@@ -0,0 +1,91 @@
+# 组件基础
+## 基本实例
++ 组件是可复用的Vue实例 且带有一个名字 Vue.component('组件名',{属性})
++ 因为组件是一个可复用的Vue实例 所以他跟new Vue可以接收一样的选项 比如data、computed、watch、methods 以及生命周期钩子等 但el是一个例外
+## 
+    <div id="components-demo">
+        <button-counter></button-counter>
+    </div>
+    Vue.component('button-counter', {
+        data: function () {
+            return {
+                count: 0
+            }
+        },
+        template: '<button v-on:click="count++">你点了我 {{ count }} 下</button>'
+    })
+    new Vue({
+        el: "#components-demo"
+    })
++ 通过new Vue创建的Vue根实例，把这个组件作为自定义元素来使用
+## 组件的复用
++ 可以将组件进行任意次数的复用  
++ 你每用一次组件，就会有一个它的新实例被创建
++ 每个组件都会各自独立维护它的 count
+### data 必须是一个函数
++ 定义组件的时候发现data并不是像data:{count:0} 这样提供一个对象
++ 而必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝
+#### 
+    data: function () {
+        return {
+            count: 0
+        }
+    }
+### 通过 Prop 向子组件传递数据
++ Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性
++ 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop
+### 
+    Vue.component('blog-post', {
+    props: ['title'],
+    template: '<h3>{{ title }}</h3>'
+    })
++ 在上面的模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
+### 
+    <div id="app">
+        <blog-post aa="My journey with Vue" bb="123"></blog-post>
+        <blog-post aa="Blogging with Vue"></blog-post>
+        <blog-post aa="Why Vue is so fun"></blog-post>
+    </div>
+    Vue.component('blog-post', {
+        props: ['aa','bb'],
+        template: '<h3>{{ aa }} {{bb}}</h3>'
+    })
+    new Vue({ el: '#app' })
++ 看上面要在prop里写入bb  才能将bb作为那个组件的一个属性
+### 单个根元素
++ 如果在组件模板中这样写
+### 
+      <h3>{{ post.title }}</h3>
+      <h2>{{post.content}}</h2>
+### 那会报错
+![picture](./IMG/06-08/1.png)
++ [Vue warn]:错误编译模板:yue.js: 634组件模板应该只包含一个根元素。如果在多个元素上使用v-if，则使用v-else-if将它们链起来。
++ 因为每个组件必须只有一个根元素
++ 可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：用一个div把这两个包裹起来
++ 组件变得越来越复杂的时候为每个相关的信息定义一个 prop 会变得很麻烦 需要重构一下
+## 
+    <blog-post
+    v-for="post in posts"
+    v-bind:post="post"
+    ></blog-post>
+    Vue.component('blog-post', {
+        props: ['post'],
+        template: `
+        <div>
+        <h1>{{ post.id }}</h1>
+        <h3>{{ post.title }}</h3>
+        <h2>{{ post.content}}</h2>
+        </div>
+            `
+    })
+    new Vue({
+        el: '#app',
+        data: {
+            posts: [
+                { id: 1, title: 'My journey with Vue', content: '小小陆' },
+                { id: 2, title: 'Blogging with Vue' },
+                { id: 3, title: 'Why Vue is so fun' }
+            ]
+        }
+    })
++ 为 post 对象添加一个新的 property，它都会自动地在` <blog-post>` 内可用
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-09.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-09.md"
new file mode 100644
index 0000000000000000000000000000000000000000..28107366601984f6c90306c75cef7523d8307fca
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-09.md"
@@ -0,0 +1 @@
+# 插槽
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-11.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-11.md"
new file mode 100644
index 0000000000000000000000000000000000000000..19680a262f2133b811f14aebea95e55ce96f97a0
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-11.md"
@@ -0,0 +1,19 @@
+# 安装vue脚手架
++ 安装vue前yarn是否已安装
++ 若没有安装，利用淘宝镜像快速安装yarn
++ yarn的速度要比npm的快很多
+## 终端输入vue 可以查看vue是否安装完成
+1. npm i -g yarn
+2. yarn config set registry http://registry.npm.taobao.org
+3. yarn global add @vue/cli
+4. 设置添加系统环境变量Path  C:\Users\Administrator\AppData\Local\Yarn\bin 
++ 注意  上面那个是机房的地址  本机的地址是C:\Users\陆万灯\AppData\Local\Yarn\bin
++ 不知道地址可以在输入 yarn global bin 来查看
+5. 进入其它盘 创建文件夹  
+    1. 其它盘: 
+    2. mkdir 文件名
+    3. cd 文件名  按tab可以直接出来
+    4. vue create 项目名
+    5. 选vue2 回车 在选yarn 回车
+    6. 打开文件管理 用vscode打开
+    7. 终端输入yarn serve    注意 这是serve不是server
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-12.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..60fd776d8a05e5dae9ec75fbedd9cb15bc3aad43
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-12.md"
@@ -0,0 +1,33 @@
+# 单文件组件
+## 创建组件(脚手架中)
++ 在脚手架中，创建一个组件
++ 就是在components中创建一个文件类型为.vue的文件，如 HellloWorld.vue
++ .vue文件就称为单文件组件，是Vue.js自定义的一种文件格式
++ 一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
++ .vue文件由三部分组成：`<template>(HTML)、<style>(css)、<script>(js)`
+## 示例，步骤：
+### 创建项目，目录结构 如下：
+    webpack-demo    项目文件名称
+        |-index.html    网页主文件
+        |-main.js   入口文件       
+        |-App.vue   vue文件
+        |-package.json  工程文件，不需要手动建立 ，直接在项目目录下npm init --yes 初始化就可以了
+        |-webpack.config.js  webpack配置文件
+        |-.babelrc   Babel配置文件
++ 编写App.vue（vue文件之间可以相互导入，就相当于父组件，子组件）
+
+## 注册组件
++ 在父组件App.vue的script标签头部使用 import 引入组件，然后后在components中定义组件
+![picture](./IMG/06-12/1.png)  
++ 定义组件中也可使用   "组件名": 组件 的形式
+## vue-loader 
++ 浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
++ 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
++ 需要注意的是vue-loader是基于webpack的 ,所以要想用  vue-loader必须先安装webpack。
+
+## webpack
++ webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
++ 实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
++ 简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出
++ [官网](http://webpack.github.io/)      webpack版本：v1.x v2.x
++ webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-15.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-15.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0f25009a9dc43b6fe66bbf56ebe5c7ac4dba10ed
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-15.md"
@@ -0,0 +1,21 @@
+# 路由
+## 路由的安装
++ 终端输入 yarn add vue-router
+## 什么是路由
+1. 路由是指根据URL分配到对应的处理程序
+2. route 它是个单数，译为路由，可以理解为单个路由或者某一个路由
+3. routes：它是个复数，表示多个的集合才能为复数；可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，官方定义routes是一个数组；routes表示多个数组的集合
+4. router：译为路由器，上面都是路由，这个是路由器，可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；
+    + 比如说当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；
+### 创建一个demo来看
++ 首先确保vue-router已经安装好了
++ 可以打开package.json文件来查看vue-router的版本号  
+![picture](./IMG/06-15/1.png)  
+### 开始操作
+1. src文件夹下创建2个文件 home.vue 和 about.vue
+2. [点击查看代码](./IMG/06-15/代码.txt)
+3. 在 App.vue中 定义`<router-link >` 和 `</router-view>` [点击查看代码](./IMG/06-15/代码.txt)
+4. 在 src目录下再新建一个router.js 定义router, 就是定义 路径到 组件的 映射。[点击查看代码](./IMG/06-15/代码.txt)
+5. main.js中引入路由，注入到根实例中[点击查看代码](./IMG/06-15/代码.txt)
+
+https://blog.csdn.net/qq_42043377/article/details/82894144
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-16.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-16.md"
new file mode 100644
index 0000000000000000000000000000000000000000..eac88d9322c8974fb93eb9f276af4882c1f518f3
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-16.md"
@@ -0,0 +1,133 @@
+# 动态路由
++ app.vue 中添加两个router-link
+##
+    <template>
+    <div id="app">
+        <img src="./assets/logo.png">
+        <header>
+        <router-link to="/home">Home</router-link>
+        <router-link to="/about">About</router-link>
+        <!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
+        <router-link to="/user/123">User123</router-link>
+        <router-link to="/user/456">User456</router-link>
+        </header>
+        <router-view></router-view>   
+    </div>
+    </template>
++ router.js 配置user动态路由
+## 
+    const routes = [
+        {
+            path:"/home",
+            component: home
+        },
+        {
+            path: "/about",
+            component: about
+        },
+        /*新增user路径，配置了动态的id*/
+        {
+            path: "/user/:id",
+            component: user
+        },
+        {
+            path: '/', 
+            redirect: '/home' 
+        }
+    ]
++ user组件
+## 
+    <template>
+        <div>
+            <h1>User</h1>
+            <div>我是user组件</div>
+        </div>
+    </template>
+    <script>
+        export default {
+    
+        }
+    </script>
++ 这时在页面中点击user123 和user456, 可以看到它们都导航到user组件，配置正确
+
+# 嵌套路由
++ 嵌套路由，主要是由我们的页面结构所决定的。
++ 当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。
++ 当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。
++ 在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。
++ 所以vue  提供了childrens 属性，它也是一组路由,相当于我们所写的routes。
+1. 首先，在home页面上定义三个router-link 标签用于导航，
+2. 然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要一一对应。
+3. home.vue 组件修改如下：
+## 
+    <template>
+        <div>
+            <h1>home</h1>
+    <!-- router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
+            <p>
+                <router-link to="/home/phone">手机</router-link>
+                <router-link to="/home/tablet">平板</router-link>
+                <router-link to="/home/computer">电脑</router-link>
+            </p>
+            <router-view></router-view>
+        </div>
+    </template>
+4. router.js 配置路由，修改如下：
+## 
+    const routes = [
+        {
+            path:"/home",
+    　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
+            component: home,
+    　　　　 // 子路由
+            children: [
+                {
+                    path: "phone",
+                    component: phone
+                },
+                {
+                    path: "tablet",
+                    component: tablet
+                },
+                {
+                    path: "computer",
+                    component: computer
+                }
+            ]
+        },
+        {
+            path: "/about",
+            component: about
+        },
+        {
+            path: "/user/:id",
+            component: user
+        },
+        {
+            path: '/', 
+            redirect: '/home' 
+        }
+    ]
++ 这时当我们点击home 时，它下面出现手机等字样，但没有任何对应的组件进行显示，这通常不是我们想要的。
++ 要想点击home时，要想渲染相对应的子组件，那还需要配置一条路由。当进入到home 时，它在children中对应的路由path 是空 ‘’，
++ 完整的childrens 如下
+## 
+    children: [
+        {
+            path: "phone",
+            component: phone
+        },
+        {
+            path: "tablet",
+            component: tablet
+        },
+        {
+            path: "computer",
+            component: computer
+        },
+        // 当进入到home时，下面的组件显示
+        {
+            path: "",
+            component: phone
+        }
+    ]
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-18.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-18.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cbbac4e1642f313b1f050e9c845524580b45af80
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-18.md"
@@ -0,0 +1,5 @@
+# 编程式的导航
++ 编程式导航：这主要应用到按钮点击上。
++ 当点击按钮的时候，跳转另一个组件, 这只能用代码，调用rourter.push() 方法。 .
++ 当们把router 注入到根实例中后，组件中通过 this.$router 可以获取到router, 
++ 所以在组件中使用 this.$router.push("home"), 就可以跳转到home界面
\ No newline at end of file
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-06-19.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-06-19.md"
new file mode 100644
index 0000000000000000000000000000000000000000..da90eef557915a100f96c273f284d6ba2acacf7b
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-06-19.md"
@@ -0,0 +1,12 @@
+# 命名路由
++ 命名路由，很简单，因为根据名字就可以知道，这个路由有一个名字，那就直接给这个路由加一个name 属性，就可以了。 
++ 给user 路由加一个name 属性：
+## 
+    {
+            path: "/user/:id",
+            name: "user",
+            component: user
+    }
++ 命名路由的使用, 在router-link 中to 属性就可以使用对象了
++  `<router-link to="/user/123">User123</router-link>` // 和下面等价 
++  `<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>`   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定
\ No newline at end of file