From 6a6626c2be9b4792217c03c11367d7c0d3f21822 Mon Sep 17 00:00:00 2001
From: xy <1719746484@qq.com>
Date: Thu, 10 Jun 2021 16:50:50 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note-06-08-21.md"                         |  79 +++++++++++
 .../note-06-09-21.md"                         | 131 ++++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-08-21.md"
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-09-21.md"

diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-08-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-08-21.md"
new file mode 100644
index 0000000..55e39bf
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-08-21.md"
@@ -0,0 +1,79 @@
+## 第九节Vue课堂笔记
+
+```
+Vue组件
+
+定义一个名为btn-count的新组件
+
+组件时可以重复使用的Vue实例，可以一直点一直点，123456789......
+
+  <div id="app">
+         <btn-count></btn-count>
+         <btn-count></btn-count>
+         <btn-count></btn-count>
+         <btn-count></btn-count>
+     </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13"></script>
+    <script>
+        Vue.component("btn-count",{
+            data:function(){
+                return{
+                    count:0
+                }
+            },
+            template:`
+            <input type="button" :value="count" @click="count++">
+            `
+        })
+
+        let app = new Vue({
+            el:"#app",
+            data:{
+
+            }
+        })
+
+    </script>
+
+```
+```
+
+通过Prop向子组件传递数据
+
+传递标题 第一个组件
+
+ <div id="app">
+         <blog-post title="第一个组件"></blog-post>
+     </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13"></script>
+    <script>
+        Vue.component("btn-count",{
+            data:function(){
+                return{
+                    count:0
+                }
+            },
+            template:`
+            <input type="button" :value="count" @click="count++">
+            `
+        })
+
+        Vue.component("blog-post",{
+            props:["title"],
+            template:`<h1>{{title}}</h1>`
+        })
+
+        let app = new Vue({
+            el:"#app",
+            data:{
+
+            }
+        })
+
+    </script>
+
+```
diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-09-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-09-21.md"
new file mode 100644
index 0000000..a2fdc88
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-09-21.md"
@@ -0,0 +1,131 @@
+## 第十节Vue课堂笔记
+
+# 插槽 加 保姆级教学 Vue-CLI 安装到部署上网页（有手就行）
+
+```
+插槽
+ <div id="app">
+        <btn-txt>
+            哈哈哈哈哈哈哈哈哈
+        </btn-txt>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+
+    <script>
+        Vue.component("btn-txt",{
+            props:["msg"],
+            template:`
+            <h1>
+            <strong>呵呵呵呵呵</strong>
+                <slot></slot>
+            </h1>
+            `
+        })
+
+        let app=new Vue({
+            el:"#app",
+            data:{
+
+            }
+        })
+    </script>
+```
+# Vue-CLI
+```
+集成式
+
+首先在cmd或者Windows PowerShell里下载yarn
+
+npm i -g yarn
+
+在环境变量里添加路径...yarn/bin(也有可能是在下载完@vue/cli后才添加)
+
+之后yarn global add @vue/cli
+
+进D盘 d: 创建一个新的文件夹 mkdir myGit(这里以myGit为例)
+
+cd进新创建的文件夹
+
+cd .\myGit\
+vue create my-vue-app
+
+选择Vue 2
+选择Vue yarn
+
+现在my-vue-app已经在D盘的文件夹里了
+
+在code打开，在终端输入，git status
+(会提示下载一个Vetur的插件，在查看App.vue的时候，会跳出一个提示框)
+
+yarn lint
+yarn build
+
+直接在文件资源管理器打开html文件是没有用的，这个时候连接Xshell
+
+su
+cd /var/www
+ll
+
+创建一个新的
+mkdir kelo.icu(此处以kelo.icu为例)
+cd kelo.icu/
+
+此时还没有权限，不能把项目拉到Xftp里
+设置权限
+
+ll
+ll .
+ll -a .
+cd ..
+ll -l
+
+chmod -R 777 kelo.icu/
+
+这个时候就可以把项目文件放到Xftp里了
+
+vim /etc/nagin/conf.d/kelo.icu.conf
+
+这时候配置文件
+
+server {
+    listen 80;
+    server_name kelo.icu;
+
+    location / {
+        root /var/www/kelo.icu;
+        index index.html;
+    }
+}
+保存，按Ctrl+:,输入wq!退出
+
+接着继续输入命令
+
+nginx -t
+(这时候发现一些错误文件，删掉它)
+rm -f /etc/nginx/conf.d/chen0622.com.conf（那个时候的错误文件）
+nginx -t
+(还有错误文件，继续删)
+rm -f (错误文件)
+(如果没有错误文件，可以跳过)
+
+nginx -t
+nginx -s reload
+
+到这里可以搜网址
+kelo.icu
+
+这时候显示的是找不到IP地址
+
+打开C盘 - Windows - System32 - drivers - etc - 打开hosts文件的属性
+属性 - 安全 - 高级 - 更改权限 - 添加 - 选择主体 - 高级 - 立即查找 - 选择Administrator - 确定 - 基本权限全部选 - 确定 - 应用 - 是 - 确定 - 确定 - 通过code打开hosts文件
+
+加入 IP地址（这里是个例子）
+
+172.16.10.214 kelo.icu 
+
+跳出一个框框，Overwrite
+
+更详细的看视频，淦
+```
\ No newline at end of file
-- 
Gitee


From b8fbb11721b911264cb8f6ccb9a2641f04604489 Mon Sep 17 00:00:00 2001
From: XY <1719746484@qq.com>
Date: Sun, 13 Jun 2021 18:48:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note-06-11-21.md"                         |  3 ++
 .../note-06-12-21.md"                         | 41 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-11-21.md"
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-12-21.md"

diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-11-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-11-21.md"
new file mode 100644
index 0000000..e06e25d
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-11-21.md"
@@ -0,0 +1,3 @@
+## 和九号的CLI安装下载部署差不多
+
+# 看视频
\ No newline at end of file
diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-12-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-12-21.md"
new file mode 100644
index 0000000..c27e39a
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-12-21.md"
@@ -0,0 +1,41 @@
+# 单文件组件
+
+```
+什么是单文件组件
+
+把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件
+
+
+```
+
+```
+在src/components里再创建一个vue文件，举例ATest.vue
+
+然后还要在APP.vue 加入ATest才会有所显示
+
+
+APP.vue内
+
+<template>
+  <div id="app">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <a-test></a-test>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import ATest from './components/ATest.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+    ATest
+  
+  }
+}
+</script>
+
+
+```
\ No newline at end of file
-- 
Gitee