From 704a4b02b22ed6b7e5063266514bbce7a56b248b Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Wed, 23 Dec 2020 16:51:20 +0800
Subject: [PATCH] zujian

---
 vue/vue简介.md                                |   2 +-
 vue/组件.md                                   |  82 +++++++++++++++
 vue/组件间通信.md                             |  94 ++++++++++++++++++
 .../image-20201223141638119.png               | Bin 0 -> 1865 bytes
 .../image-20201223141710470.png               | Bin 0 -> 2332 bytes
 vue/表单输入绑定v-model.md                    |  30 ++++--
 6 files changed, 196 insertions(+), 12 deletions(-)
 create mode 100644 vue/组件.md
 create mode 100644 vue/组件间通信.md
 create mode 100644 vue/表单输入绑定v-model.assets/image-20201223141638119.png
 create mode 100644 vue/表单输入绑定v-model.assets/image-20201223141710470.png

diff --git a/vue/vue简介.md b/vue/vue简介.md
index d83e35a..8616614 100644
--- a/vue/vue简介.md
+++ b/vue/vue简介.md
@@ -100,4 +100,4 @@ var app2 = new Vue(var app2 = new Vue({
 >
 > v-bind:+属性名="属性值"
 >
-> v-bind 的缩写是 :
\ No newline at end of file
+> v-bind 的缩写是  :
\ No newline at end of file
diff --git a/vue/组件.md b/vue/组件.md
new file mode 100644
index 0000000..dd7e1d3
--- /dev/null
+++ b/vue/组件.md
@@ -0,0 +1,82 @@
+# 组件
+
+组件是带有一个名字的可复用的vue实例，可以在new Vue创建的vue根实例中把定义的组件当做自定义元素来使用
+
+### 组件构成
+
+组件和new Vue接收的选项相同，都包括如下部分
+
+- data
+
+- methods
+
+- computed
+
+- watch 
+
+- components   组件内可以调用其他组件
+
+  > el 是根实例特有的选项，组建中不能出现el选项
+
+
+
+### 组件定义和使用：
+
+#### 定义一个组件
+
+需要把组件实例赋给一个变量
+
+```
+ let counter=Vue.component('counter', {
+            data: function () {
+                return {
+                    count: 0
+                }
+            },
+            methods:{
+                add(){
+                    this.count+=1
+                }
+            },
+            template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
+        })
+```
+
+> 声明组件中，组件内部的data必须是一个函数
+>
+> 因此 ，每个组件实例都是彼此独立的 
+
+使用它：
+
+js部分：
+
+```
+ var app = new Vue({
+            el: '#app',
+            data: {
+                selected: []
+            },
+            component:{
+                counter
+            }
+
+
+        })
+```
+
+template (html)部分
+
+```
+<div id="app">
+	<counter></counter>
+	<counter></counter>
+	<counter></counter>
+	<counter></counter>
+	
+</div>
+```
+
+> 组件可以使用任意次数
+>
+> 这个例子中，id=app的部分叫做 父组件    counter指代的部分叫做 子组件
+
diff --git a/vue/组件间通信.md b/vue/组件间通信.md
new file mode 100644
index 0000000..f47ec10
--- /dev/null
+++ b/vue/组件间通信.md
@@ -0,0 +1,94 @@
+# 组建间通信
+
+### 父组件往子组件传值（prop）
+
+子组件中使用prop 定义从父组件接收的值
+
+父组件调用子组件时， 子组件prop里面定义的值就变成了父组件从实例 template部分变成属性 
+
+props语法：
+
+- 对象格式定义
+
+  props:{
+
+  ​	属性名：{
+
+  ​			type： 数据类型
+
+  ​			default: 默认值 
+
+  ​		}
+
+  }
+
+```
+ <div id="app">
+        <counter msg="父组件传过来的值1"></counter>
+        <counter msg="父组件传过来的值2"></counter>
+        <counter msg="父组件传过来的值3"></counter>
+        <counter msg="父组件传过来的值4"></counter>
+    </div>
+    <script>
+        let counter=Vue.component('counter', {
+            data: function () {
+                return {
+                    count: 0
+                }
+            },
+            props:{
+                msg:{
+                    type:String
+                }
+            },
+            methods:{
+                add(){
+                    this.count+=1
+                }
+            },
+            template: '<div>{{msg}}</div>'
+        })
+        var app = new Vue({
+            el: '#app',
+            component:{
+                counter
+            }
+
+
+        })
+        
+    </script>
+```
+
+
+
+- 数组格式定义Props
+
+  props: ['属性名'],
+
+  上面的Props重新定义为：
+
+  ```
+  props:['msg']
+  ```
+
+  
+
+
+
+### 子组件往父组件传值（$emit）
+
+在子组件的template部分中触发事件，事件处理函数内部 写入
+
+```
+this.$emit('drag<监听这个事件的所用的名称>',要传的值)
+```
+
+然后从父组件的template部分做如下处理：
+
+```
+<counter @timend="end"><counter>
+其中  timeend 是监听这个end这个时间所用的名称
+	 end是触发timeend之后的处理函数名
+```
+
diff --git a/vue/表单输入绑定v-model.assets/image-20201223141638119.png b/vue/表单输入绑定v-model.assets/image-20201223141638119.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e6626b31a3526faa87dbc568b721696642810c8
GIT binary patch
literal 1865
zcmchY`#Td18^?!)jUnp^kC3b!dWswxIiD3vC|V|moJve1Go~Cyk(LgG@zCQ;&X2P>
z%)HBCh$hF47>gmwY2n@b{_tMc^AEh&^||lwFZU1M>;7KXeLr)6TZ;i@fdBwN%+|)j
zk*9cG#R?zgb$<pZ9sm%Mu(dFC#t=Ev)vq!Ua!1z*m$&&|b;+!hI~By!qWxl_&f^*R
zRM1_k9OjPjr7T}3Q`HE5eHEvI!q;6&A3?<1Pt-T8p(|=hjNl%x8_Y&7=exKZIDw9c
zE1qNQNwq&d>>-l{=*wXWoQV2i|9FCe@!aP!7u=<Vd(RvU3=Ej7tKi_7R`y?pJDZDx
zwPW8G`c6b0{Mr>nptBB2jH}%%BSGC)o9OPVj!zv{UMFfv_lSB%_p*kd{xV5&A;Kzx
z@tRJWp&YYRqprAQZV8?mX@Q-yy55e!E2ZFItB^t+d@SKziFDm>c{Y+<@KlLNM;DIS
z;iq<#<FB%T;=402n@JgDjpDyvz^cP|erE;~f~lzv^H0gb>kp(8t{e2oD_OKbh*>5Y
z(nVn~NW^muN1M8Y3WJ+5aVpP4Xs)Ai9Ueqlr$atLUSf(|Y8c#%E~b*dW?V_e@p)*#
z&E;4#YM}nN<LjCD68;q!WvbMgwa^y1y*fXc`#~VDN@J{Vzmled!G^s<D6k4AI~`tj
z{1;U2(8?HZVF%cZhG0fcF0>)hP*B9$EY+)8uN8?qhcOGJB7Q>DO5|Da+^FBRz@4(?
z;5!PG;eM4qcal!1q&_55)l0$QBU?P!$(T1uLVi#U%<lxEeZ8vmM<MEsv+pRZCt<~^
zc8zGk9ZjKiFofXrawu=8U-EpE3Dj#{Ow2sd3@s|oce7kuXxZkPr)Px@YcT+X6sALz
zHU3GRs3opyAU3g4Xa%FPAyK>0zqEz;1ksJtbhS25HNrl1jxA_uiy8_&G-vL(qJDf<
zJgN7-DcB@MB)nucr~KAv5jl^lm5*Y=X``7y@YtI8wvi1?4v6LlNy4nQ>*d(0NvV_e
zQhyeJ+z&OKt%b&2xA}<GDdTtlo))k@QH2xgO!8JsSi;zQHoJa1l6GlEzO^RC;=-)1
z{X=t?$_11GxV{NG#Z`>S`v-ZGcDl9e<(m&jBEp)#89YhU<T;+M(7$uWFS{z6R_1N5
z+1bta={b%f5k|Bg>F%EBj||(BQe0!SGq@AHVBn<v+vwww3fzNr(e8jyQOg(S1c@Ja
zd)S`^I!uW028VggF5#*(i-zGO5q^OX#7VQ%)4%3VJ>;L-*62xyfwcu`jk}8c_+)7Q
z%ofMA(^Yn(%m`(lFgN8lH;omh_-l6!{%Oqh?@N|RvBF)NEtNqmXHO;{?EM7YX^*C0
z+g8i$2QSK|tk05#TBG-y*9zVKkOV6IFCd~Wgw3De$=tXAAC#oQwnDuh|0kYoz7{RF
zeu#_D<eu1Vnf#4yEf9KsHc+C09VlukPxE+g=z3Y;(IV9dNqy{?cIsP;7_^9}gJNfD
zOhfDFHqML>*qj6@FTFVperLy)2qJ#>)#ml7*n}J<bNU_w)c|_HJ^uRqqsr3(s{!}N
zi03|WwgMG8w%#1jHhfN^tA4L+vnCZxZKcqq#qw0F?vWb^QGScUehbLhoHIzl*6*_(
z`5=M%%9nwpv}1ydpgr;`e5tfZrmOW`>GkyeO&0b|k^CRXj;j6MFg40_T3IKRe2Zf!
zJAx5ib0iVY#{|9c7xV|nI_L*r{-uV}W-fU^)6u%u&Rh`~x>p;!H%Q40Wtw<%3%w>w
z1IiNVBdu=3v;n^_4XYawXNT0MZw?2YeR);+n+^BER8AYg3pJpI0_;>-x*+H$UnH|>
z>t*lL$HV)UwYT_G?82|So_olbf2;byz#M2|e^?W3>%Ak^mqF=GUEne{M=u|Ha{6?o
zUAPG6H{|M<O%2_P%2-lcpU1psAV%z}FV&MHQ?W?a{ng`h5#XD43fmK3L3)rI!nvjw
zhUzh0aw+-TsXl^CV|+Dw<a^E8)+hb%4VZTH$T(fGg>dDI{@^rQ(N*U|i(@#-edw<V
zg<+yy701)w4!Kyl<`rmvTmt`8{Ou1q1UP^Wm%pV4QHoEz=^lMFq{%ztBmdjG8L9qI
zAhiZFp{k#iRQnc8?5%mPcrLjY@jbJ6`hB$u_`apvvB0qwV4c(Bwi@CDau+`A67`}`
z_lEJ+tS)pT-Z#08ura)IYI&^;&mNkw@@Zn-D2tn99LXg`{oKWIW{!AIvTE!_@pQy}
za1Fa02A66s%Z|(gEL2M?54m8|{c`lr#^hlNi-|eS*tF50iL)f7Uweu%ylW@=|K(8N
YNCdOpE3ux<dyxQJOSnaanMdru0e8u0@Bjb+

literal 0
HcmV?d00001

diff --git a/vue/表单输入绑定v-model.assets/image-20201223141710470.png b/vue/表单输入绑定v-model.assets/image-20201223141710470.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdb19d0d0444edf5d35f497efe4fcfd98e7bac8a
GIT binary patch
literal 2332
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

literal 0
HcmV?d00001

diff --git a/vue/表单输入绑定v-model.md b/vue/表单输入绑定v-model.md
index 1b1a702..2503704 100644
--- a/vue/表单输入绑定v-model.md
+++ b/vue/表单输入绑定v-model.md
@@ -153,23 +153,31 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
 
     ```
     <div id="example-6">
-      <select v-model="selected" multiple style="width: 50px;">
-        <option>A</option>
-        <option>B</option>
-        <option>C</option>
-      </select>
-      <br>
-      <span>Selected: {{ selected }}</span>
-    </div>
+                <select v-model="selected"  multiple="multiple"  style="width: 50px;">
+                  <option>A</option>
+                  <option>B</option>
+                  <option>C</option>
+                  <option>D</option>
+                  <option>E</option>
+                  <option>F</option>
+                </select>
+                <br>
+            <span>Selected: {{ selected }}</span>
+              </div>
     ```
-
+    
     ```
     new Vue({
       el: '#example-6',
       data: {
         selected: []
-      }
+ }
     })
     ```
+    
+    选择前：![image-20201223141638119](表单输入绑定v-model.assets/image-20201223141638119.png)
+    
+    选择后：![image-20201223141710470](表单输入绑定v-model.assets/image-20201223141710470.png)
+
+​              使用时需要按ctrl选中多个
 
-    
\ No newline at end of file