From 9618120f0b2340c66f8529765c821edf5ad42d77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Wed, 9 Jun 2021 16:33:50 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-6-09.md"                                | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-09.md"

diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-09.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-09.md"
new file mode 100644
index 0000000..17c2b5c
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-09.md"
@@ -0,0 +1,16 @@
+# 插槽
+```
+  <div id="app">
+        <alert-txt>
+            插槽
+        </alert-txt>
+    </div>
+
+       Vue.component('alert-txt',{
+            template:`
+                <h1>
+                    <slot></slot>
+                </h1>
+            `
+        })
+```
\ No newline at end of file
-- 
Gitee


From 228ed32abe16a825c00c0519d5c57b2ea91f641a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Thu, 10 Jun 2021 15:37:46 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-6-08.md"                             | 220 ++++++++++++++++++
 1 file changed, 220 insertions(+)
 create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-08.md"

diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-08.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-08.md"
new file mode 100644
index 0000000..7469dab
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-08.md"
@@ -0,0 +1,220 @@
+Vue的第九次课 组建基础
+
+组件的复用 组件事例(在组件创建中template 中定义一个子组件绑定value的值 并绑定点击事件是一个方法或是定义好的表达式) 组件创建中data必须是一个匿名的方法并且返回的是一个对象 组件复用:定义的组件 每应用一个相同的原组件 相当于新建一个原有的组件事例 即用相同组件相当于一直创建相同的组件 template:组件的标签
+    <div id="app">
+       <add-count></add-count>
+       <add-count></add-count>
+       <add-count></add-count>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count',{
+            data:function (){
+                return {
+                    count:0
+                }
+            },
+            template:` <input type="button" :value="count" @click="count++">`
+        })
+        let app=new Vue({
+            el:'#app',
+            data:{
+
+            }
+        })
+    </script>
+组件的组织 为了方便组件在模板中使用这些组件必须通过注册以便新建的Vue事例(new Vue({}))识别调用 注册类型分 局部注册和全局注册 我们现在用的 Vue.component 是全局注册 但是比较常用的是局部注册后面会继续学习到 即 全局注册的组件可以被新建的Vue事例(新建的根实例)调用
+
+通过Props向子组件传递数据 props 作为一个中间商 先在父组件 中通过v-for 遍历根实例中定义的数值 再将遍历的获取的item 绑定到props中的title id 再讲props中从父组件获取的值给予子组件直接应用
+
+   <div id="app">
+           <add-count v-for='item in itemlist' :title='item.name' :id='item.id'>
+            
+        </add-count>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count', {
+            props: ['title','id'],  
+            template: `<li>{{id}}-{{title}}</li>`
+        })
+        let app = new Vue({
+            el: '#app',
+            data: {
+                itemlist:[
+                    {
+                        id:1,
+                        name:'笑'
+                    },
+                    {
+                        id:2,
+                        name:'口'
+                    },
+                    {
+                        id:3,
+                        name:'常开'
+                    },
+                ]
+            }
+        })
+    </script>
+单个根元素 每个组件只有一个根元素 template:子组件 子组件可填写一个组件 要填写多个组件需要用一个父组件来装载即可 如下用一个父组件div 定义一个class方便应用样式或者再次调用 来装载即可显示多个props获取值的组件
+ <div id="app">
+        <add-count v-for='(item) in itemlist' :title='item.name' :id='item.id'>
+            
+        </add-count>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count', {
+            props: ['title','id'],  
+            template: `  
+            <div class="add-count">
+            <h1>{{id}} </h1> 
+           <p> {{title}}  </p>
+           </div>    
+            `
+        })
+        let app = new Vue({
+            el: '#app',
+            data: {
+                itemlist:[
+                    {
+                        id:1,
+                        name:'笑'
+                    },
+                    {
+                        id:2,
+                        name:'口'
+                    },
+                    {
+                        id:3,
+                        name:'常开'
+                    },
+                ]
+            }
+        })
+    </script>
+监听子组件事件 子组件使用 emit()方法触发事件，父组件使用v−on指令监听子组件的自定义事件。子組件中定义了一个触发事件@事件类型="emit('变量名称')" 注意这里子组件定义的input 中value获取不到值 要通过props获取或者 要在父组件(addcount)绑定value
+通过子组件定义一个点击的触发事件 使得父组件监听这个子组件的事件并在其触发后父组件也触发监听的事件
+   <div id="app">
+      
+            <add-count v-for='(item,index) in itemlist' :title='item.name' :id='item.id'   @addcount='dosomething(index)'>         
+            </add-count>
+           
+        
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count', {
+            props: ['title','id'],  
+            template: `  
+            <li>{{title}}<button @click="$emit('addcount')">移除</button></li>
+            `
+        })
+        let app = new Vue({
+            el: '#app',
+            data: {
+                itemlist:[
+                    {
+                        id:1,
+                        name:'笑'
+                    },
+                    {
+                        id:2,
+                        name:'口'
+                    },
+                    {
+                        id:3,
+                        name:'常开'
+                    },
+                ]
+            },
+            methods:{
+                dosomething:function(index){
+                    this.itemlist.splice(index,1)
+                }
+            }
+        })
+    </script>
+
+使得事件抛出一个值 通过$event 获取子组件中抛出的值引用与父组件
+    <div id="app">
+      
+            <add-count  :value='count'   @dd='count+=10'>         
+            </add-count>
+          
+        
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count', {
+            props: ['title','id'],  
+            template: `  
+            <input type="button"  @click="$emit('dd',10)">
+            `
+        })
+        let app = new Vue({
+            el: '#app',
+            data: {
+                count:0,
+             
+            }
+        })
+    </script>
+在组件上使用 v-model 通过在父组件中绑定title 传入prors中 并在其子组件绑定value 并监听子节点并将新的值抛出 在父节点绑定触发事件
+<div id="app">
+      
+            <input type="text" v-model='name'>
+            <add-count :title='name' @input='dosomething'></add-count>
+       
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+    <script>
+        Vue.component('add-count', {
+            props: ['title'],  
+            template: `  
+            <input :value="title"  @input="$emit('input','$event.target.value')">
+            `
+        })
+        let app = new Vue({
+            el: '#app',
+            data: {
+                name:'有值',
+            },
+            methods:{
+                dosomething:function(){
+                       console.log(1);
+                }
+            }
+        })
+    </script>
+插槽 快捷变量插入 之前通过{{变量}}插入
+  <div id="app">
+        <add-count>
+            也变秃了
+        </add-count>
+    </div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<script>
+    Vue.component('add-count', {
+        template: `  
+        <div>
+        <strong>变强了些</strong> 
+        <slot></slot>  
+        </div>    
+        `
+    })
+    let app = new Vue({
+        el: '#app',
+        data: {
+            name:'有值',
+        }
+    })
\ No newline at end of file
-- 
Gitee


From 74addfd36fbc1409af604941194a4eb7937f9aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Sat, 12 Jun 2021 16:59:00 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=8D=95=E6=96=87=E4=BB=B6=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-6-12.md"                             | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-12.md"

diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-12.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-12.md"
new file mode 100644
index 0000000..fb916c7
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-12.md"
@@ -0,0 +1,57 @@
+#  vue单文件组件
+## 设置淘宝镜像
+```
+npm config set registry https://registry.npm.taobao.org
+```
+## 组件
+创建vue项目后建一个以vue为后缀的vue文件，用来写组件
+
+```
+<template>
+    <p>
+        <a href="https://www.iqiyi.com/v_19rxrf2hho.html">{{getting}}</a>
+    </p>
+</template>
+
+<script>
+module.exports={
+    data: function(){
+        return {
+            getting:'Hello World'
+        }
+    }
+}
+</script>
+
+<style scoped>
+p{
+    font-size: 2rem;
+}
+a{
+    text-decoration: none;
+    color: aqua;
+
+}
+</style>
+```
+这是一个简单的组件
+
+接下来是引用组件
+
+在app.vue的文件夹下引入
+```
+import Hello from './Hello'
+```
+然后使用componens定义全局组件
+```
+export default {
+  name: 'App',
+  components: {
+    Hello
+  }
+}
+```
+最后使用组件，在开头的template中的div中写入你的组件名即可
+```
+    <Hello/>
+```
\ No newline at end of file
-- 
Gitee