diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.11.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.11.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5893c57b83a7d2fcf46f4f3212acbab7a3520b98
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.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/\351\273\204\345\201\245\346\265\267/2021.6.12.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.12.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bc75ef12cfcfec8b6d7d8754d98dc79b568b5c3d
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.12.md"
@@ -0,0 +1,11 @@
+# 1.简要介绍Vuex原理
+Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。
+
+# 2.简要介绍各模块在流程中的功能：
+Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
+dispatch：操作行为触发方法，是唯一能执行action的方法。
+actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
+commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
+mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
+state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
+getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。
\ No newline at end of file
diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.15.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.15.md"
new file mode 100644
index 0000000000000000000000000000000000000000..17468ce74d01750854e6b3420104f3be76db8858
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.15.md"
@@ -0,0 +1,43 @@
+# 　用Vue.js + vue-router创建单页应用非常简单。使用Vue.js ，已经可以通过组合组件来组成应用程序，把vue-router添加进来，需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们
+
+
+
+```
+<div id="app">
+  <h1>Hello App!</h1>
+  <p>
+    <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 -->
+    <router-link to="/foo">Go to Foo</router-link>
+    <router-link to="/bar">Go to Bar</router-link>
+  </p>
+  <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
+  <router-view></router-view>
+</div>
+<script src="vue.js"></script>
+<script src="vue-router.js"></script>
+<script>
+// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
+
+// 1. 定义（路由）组件，可以从其他文件 import 进来
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+// 2. 定义路由
+// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
+const routes = [
+  { path: '/foo', component: Foo },
+  { path: '/bar', component: Bar }
+]
+
+// 3. 创建 router 实例，然后传 `routes` 配置，当然还可以传别的配置参数
+const router = new VueRouter({
+  routes // （缩写）相当于 routes: routes
+})
+
+// 4. 创建和挂载根实例。
+// 通过 router 配置参数注入路由，从而让整个应用都有路由功能
+const app = new Vue({
+　　el:'#app',
+　　router
+})</script>  
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.4.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.4.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3078c3e01c04177ef96dda11a4391451d94716fa
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.4.md"
@@ -0,0 +1,9 @@
+#vue修饰符
+
+##事件修饰符
+.stop: 阻止事件冒泡
+.prevent: 阻止默认行为
+.capture: 添加事件使用捕获模式
+.self: 事件只能有元素自身触发
+.once: 事件只能触发一次
+.passive:
diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.5.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.5.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ba5e80d6c5f42c0be16160e69ac6e5b7fda26d7d
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.5.md"
@@ -0,0 +1,14 @@
+#表单输入绑定
+你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
+
+##v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
+
+
+
+
+
+v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
+
+text 和 textarea 元素使用 value property 和 input 事件；
+checkbox 和 radio 使用 checked property 和 change 事件；
+select 字段将 value 作为 prop 并将 change 作为事件。
\ No newline at end of file
diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.8.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.8.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e43ee9db5be2898a62d5924b916715f6ef9dfa22
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.8.md"
@@ -0,0 +1,29 @@
+# 组件
+
+## 注册组件
+注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。
+```
+ Vue.component('mycomponent',{
+    template: `<div>这是一个自定义组件</div>`,
+    data () {
+      return {
+        message: 'hello world'
+      }
+    }
+  })
+
+```
+
+直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。
+```
+var app = new Vue({
+    el: '#app',
+    data: {
+    },
+    components: {
+      'my-component': {
+        template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
+      }
+    }
+  })
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\201\245\346\265\267/2021.6.9.md" "b/\351\273\204\345\201\245\346\265\267/2021.6.9.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d799723724b2c0c7098d0b32e68e78c12a6c3132
--- /dev/null
+++ "b/\351\273\204\345\201\245\346\265\267/2021.6.9.md"
@@ -0,0 +1,48 @@
+# 组件通信
+
+
+```
+//App.vue父组件
+<template>
+  <div id="app">
+    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
+  </div>
+</template>
+<script>
+import Users from "./components/Users"
+export default {
+  name: 'App',
+  data(){
+    return{
+      users:["Henry","Bucky","Emily"]
+    }
+  },
+  components:{
+    "users":Users
+  }
+}
+```
+```
+
+
+
+//users子组件
+<template>
+  <div class="hello">
+    <ul>
+      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'HelloWorld',
+  props:{
+    users:{           //这个就是父组件中子标签自定义名字
+      type:Array,
+      required:true
+    }
+  }
+}
+</script>
+```
\ No newline at end of file