diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-6-08-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-6-08-01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..167b00f16efa45e0e8aa818783987d03d7670654
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-6-08-01.md"
@@ -0,0 +1,388 @@
+# 组件基础(vue的第九次课)
+
+## 基本示例
+
+举个例子：
+
+    <div id="app">
+            <post_cc></post_cc>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+        <script>
+            Vue.component('post_cc', {
+                data: function () {
+                    return {
+                        count: 0
+                    }
+                },
+                template: `
+                <input type="button"  :value="count" @click="count++">
+                `
+            })
+
+            let app = new Vue({
+                el: '#app',
+                data: {
+
+                }
+            })
+
+        </script>
+
+
+因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
+
+## 组件的复用
+
+就是跟上面一样的道理但是就把一个用成多个就行了
+
+
+    <div id="app">
+            <post_cc></post_cc>
+            <post_cc></post_cc>
+            <post_cc></post_cc>
+            <post_cc></post_cc>
+            <post_cc></post_cc>
+            <post_cc></post_cc>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+        <script>
+            Vue.component('post_cc', {
+                data: function () {
+                    return {
+                        count: 0
+                    }
+                },
+                template: `
+                <input type="button"  :value="count" @click="count++">
+                `
+            })
+
+            let app = new Vue({
+                el: '#app',
+                data: {
+
+                }
+            })
+
+        </script>
+
+    
+### data 必须是一个函数
+
+当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
+
+data: {
+  count: 0
+}
+取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
+
+data: function () {
+  return {
+    count: 0
+  }
+}
+
+不然你点击一个的时候其它的随之也会改变
+
+## 组件的组织
+通常一个应用会以一棵嵌套的组件树的形式来组织：
+     *
+    ***
+   *****
+  ********
+ **********
+    [*]
+    [*]
+Component Tree
+
+例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
+
+为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
+
+Vue.component('my-component-name', {
+  // ... options ...
+})
+全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
+
+到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。
+
+## 通过 Prop 向子组件传递数据
+
+Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
+
+        <div id="app">
+            <blog-post title="四只强大撒比"></blog-post>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
+        <script>
+            Vue.component('blog-post', {
+                props: ['title'],
+                template: `<h3> {{title}} </h3>`
+
+            })
+
+            let app = new Vue({
+                el: '#app',
+                data: {
+                }
+            })
+
+        </script>
+
+
+然而在一个典型的应用中，你可能在 data 里有一个博文的数组：
+
+    <div id="blog-post-demo">
+            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
+        </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <script>
+        Vue.component('blog-post', {
+            props: ['title'],
+            template: '<h3>{{ title }}</h3>'
+        })
+
+        new Vue({
+            el: '#blog-post-demo',
+            data: {
+                posts: [
+                    { id: 1, title: '555' },
+                    { id: 2, title: '666' },
+                    { id: 3, title: '777' }
+                ]
+            }
+        })
+    </script>
+
+如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。
+
+## 单个根元素
+
+构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：
+
+    <h3>{{ title }}</h3>
+最最起码，你会包含这篇博文的正文：
+
+    <h3>{{ title }}</h3>
+    <div v-html="content"></div>
+然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
+
+    <div class="blog-post">
+    <h3>{{ title }}</h3>
+    <div v-html="content"></div>
+    </div>
+看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：
+
+    <blog-post
+    v-for="post in posts"
+    v-bind:key="post.id"
+    v-bind:title="post.title"
+    v-bind:content="post.content"
+    v-bind:publishedAt="post.publishedAt"
+    v-bind:comments="post.comments"
+    ></blog-post>
+
+所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：
+
+        <blog-post
+    v-for="post in posts"
+    v-bind:key="post.id"
+    v-bind:post="post"
+    ></blog-post>
+    Vue.component('blog-post', {
+    props: ['post'],
+    template: `
+    <div class="blog-post">
+      <h3>{{ post.title }}</h3>
+      <div v-html="post.content"></div>
+    </div>
+    `
+    })
+
+注意：
+上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。
+
+现在，不论何时为 post 对象添加一个新的 property，它都会自动地在 <blog-post> 内可用。
+
+## 监听子组件事件
+
+在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。
+
+在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能：
+
+    new Vue({
+    el: '#blog-posts-events-demo',
+    data: {
+        posts: [/* ... */],
+        postFontSize: 1
+    }
+    })
+它可以在模板中用来控制所有博文的字号：
+
+    <div id="blog-posts-events-demo">
+    <div :style="{ fontSize: postFontSize + 'em' }">
+        <blog-post
+        v-for="post in posts"
+        v-bind:key="post.id"
+        v-bind:post="post"
+        ></blog-post>
+    </div>
+    </div>
+现在我们在每篇博文正文之前添加一个按钮来放大字号：
+
+    Vue.component('blog-post', {
+    props: ['post'],
+    template: `
+        <div class="blog-post">
+        <h3>{{ post.title }}</h3>
+        <button>
+            Enlarge text
+        </button>
+        <div v-html="post.content"></div>
+        </div>
+    `
+    })  
+问题是这个按钮不会做任何事：
+
+    <button>
+    Enlarge text
+    </button>
+当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：
+
+    <blog-post
+    ...
+    v-on:enlarge-text="postFontSize += 0.1"
+    ></blog-post>
+同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
+
+    <button v-on:click="$emit('enlarge-text')">
+    Enlarge text
+    </button>
+有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。
+
+### 使用事件抛出一个值
+
+有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：
+
+    <button v-on:click="$emit('enlarge-text', 0.1)">
+    Enlarge text
+    </button>
+然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：
+
+    <blog-post
+    ...
+    v-on:enlarge-text="postFontSize += $event"
+    ></blog-post>
+或者，如果这个事件处理函数是一个方法：
+
+    <blog-post
+    ...
+    v-on:enlarge-text="onEnlargeText"
+    ></blog-post>
+那么这个值将会作为第一个参数传入这个方法：
+
+    methods: {
+    onEnlargeText: function (enlargeAmount) {
+        this.postFontSize += enlargeAmount
+    }
+    }
+
+### 在组件上使用 v-model
+
+自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
+
+    <input v-model="searchText">
+等价于：
+
+    <input
+    v-bind:value="searchText"
+    v-on:input="searchText = $event.target.value"
+    >
+当用在组件上时，v-model 则会这样：
+
+    <custom-input
+    v-bind:value="searchText"
+    v-on:input="searchText = $event"
+    ></custom-input>
+为了让它正常工作，这个组件内的 <input> 必须：
+
+将其 value attribute 绑定到一个名叫 value 的 prop 上
+在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
+写成代码之后是这样的：
+
+    Vue.component('custom-input', {
+    props: ['value'],
+    template: `
+        <input
+        v-bind:value="value"
+        v-on:input="$emit('input', $event.target.value)"
+        >
+    `
+    })
+现在 v-model 就应该可以在这个组件上完美地工作起来了：
+
+    <custom-input v-model="searchText"></custom-input>
+到目前为止，关于组件自定义事件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把自定义事件读完。
+
+## 通过插槽分发内容
+
+和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：
+
+    <alert-box>
+    Something bad happened.
+    </alert-box>
+可能会渲染出这样的东西：
+
+幸好，Vue 自定义的 <slot> 元素让这变得非常简单：
+
+    Vue.component('alert-box', {
+    template: `
+        <div class="demo-alert-box">
+        <strong>Error!</strong>
+        <slot></slot>
+        </div>
+    `
+    })
+如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！
+
+到目前为止，关于插槽你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把插槽读完。
+
+## 动态组件
+上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：
+
+<!-- 组件会在 `currentTabComponent` 改变时改变 -->
+<component v-bind:is="currentTabComponent"></component>
+在上述示例中，currentTabComponent 可以包括
+
+已注册组件的名字，或
+一个组件的选项对象
+你可以在这里查阅并体验完整的代码，或在这个版本了解绑定组件选项对象，而不是已注册组件名的示例。
+
+请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。
+
+到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态和异步组件读完。
+
+## 解析 DOM 模板时的注意事项
+
+有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
+
+这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
+
+    <table>
+    <blog-post-row></blog-post-row>
+    </table>
+这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：
+
+    <table>
+    <tr is="blog-post-row"></tr>
+    </table>
+需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
+
+字符串 (例如：template: '...')
+单文件组件 (.vue)
+    <script type="text/x-template">
+到这里，你需要了解的解析 DOM 模板时的注意事项——实际上也是 Vue 的全部必要内容，大概就是这些了。恭喜你！接下来还有很多东西要去学习，不过首先，我们推荐你先休息一下，试用一下 Vue，自己随意做些好玩的东西。
+
+如果你感觉已经掌握了这些知识，我们推荐你再回来把完整的组件指南，包括侧边栏中组件深入章节的所有页面读完。s
\ No newline at end of file
diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-6-09-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-6-09-01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6201719b441186a361b79d1e2212260bcc0a319a
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-6-09-01.md"
@@ -0,0 +1,64 @@
+# Vue CLI安装(Vue的第十次课)
+
+在window powershelll里面全局安装
+用 npm i -g yarn （保证里面yarn有存在）
+
+然后安装 vue cli
+
+npm install -g @vue/cli
+
+yarn global add @vue/cli
+这两种都行
+
+
+
+等他好了之后修改一下环境变量
+
+然后就在  windowpowershell 
+
+操作：
+
+    d:
+
+    mkdir myGitProjects
+
+    cd  D:\myGitProjects\
+
+    vue my-vue-app
+
+    vue create my-vue-app
+
+    cd .\my-vue-app\
+
+    yarn serve
+
+
+
+然后部署到服务器上面
+
+：
+
+su 
+113
+
+#cd /var/www/
+ll
+
+mkdir lhx.top
+-l
+
+#chomd -R 777 lhx.top/
+vim lhx.top.conf
+
+然后写完配置文件保存
+
+nginx -t 检查一下有没有错
+
+nginx -s reload  重启服务器
+
+然后去 C:\Windows\System32\drivers\etc 修改hosts 写 172.16.10.214   lhx.top保存
+
+最后记得提交文件，不然你就在lhx.top网站看不到内容！
+
+
+
diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-6-11-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-6-11-01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a8bbbef7edff5caae5ed3b494345a1df2efe08c6
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-6-11-01.md"
@@ -0,0 +1,42 @@
+# 在服务器上面安装Vue（11次课）
+
+1.首先下载安装node.js
+下载node.js，命令为：
+
+wget https://cdn.npm.taobao.org/dist/node/v12.16.1/node-v12.16.1-linux-x64.tar.xz
+
+##1.1 解压安装node.js
+
+tar -xvf node-v12.16.1-linux-x64.tar.xz
+
+##1.2 重命名为nodeJs
+
+mv node-v12.16.1-linux-x64 nodejs
+
+##1.3 测试node.js安装成功
+
+node -v
+
+#2. 安装vue
+
+npm install vue
+
+##2.1全局安装vue-cli
+
+npm install -g vue-cli
+
+##2.2 创建vuedemo项目，其中有项目的author名，接下来一直确定（enter）
+
+vue init webpack vuedemo
+
+
+##2.3 打开vuedemo项目，安装依赖文件
+
+npm install 
+
+##2.4 安装运行程序
+
+npm run dev
+
+
+、
\ No newline at end of file
diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-6-12-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-6-12-01.md"
new file mode 100644
index 0000000000000000000000000000000000000000..21a5cbe83301d30f2d5e8319912cd4527c41e0cb
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-6-12-01.md"
@@ -0,0 +1,14 @@
+# 单文件组件
+
+在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
+
+这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
+
+全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
+字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
+不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
+没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
+文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
+
+
+这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 webpack，它也能为 CSS Modules 提供头等支持。
\ No newline at end of file