zujian

vue/vue简介.md

@@ -100,4 +100,4 @@ var app2 = new Vue(var app2 = new Vue({
 >
 > v-bind:+属性名="属性值"
 >
-> v-bind 的缩写是 :
+> v-bind 的缩写是  :

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指代的部分叫做 子组件
+

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之后的处理函数名
+```
+

vue/表单输入绑定v-model.md

@@ -153,23 +153,31 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
 
     ```
     <div id="example-6">
-      <select v-model="selected" multiple style="width: 50px;">
+                <select v-model="selected"  multiple="multiple"  style="width: 50px;">
-        <option>A</option>
+                  <option>A</option>
-        <option>B</option>
+                  <option>B</option>
-        <option>C</option>
+                  <option>C</option>
-      </select>
+                  <option>D</option>
-      <br>
+                  <option>E</option>
-      <span>Selected: {{ selected }}</span>
+                  <option>F</option>
-    </div>
+                </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选中多个
 
-