Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje
This commit is contained in:
commit
74e6f8295e
82
vue/组件.md
Normal file
82
vue/组件.md
Normal file
@ -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指代的部分叫做 子组件
|
||||||
|
|
94
vue/组件间通信.md
Normal file
94
vue/组件间通信.md
Normal file
@ -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之后的处理函数名
|
||||||
|
```
|
||||||
|
|
BIN
vue/表单输入绑定v-model.assets/image-20201223141638119.png
Normal file
BIN
vue/表单输入绑定v-model.assets/image-20201223141638119.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
BIN
vue/表单输入绑定v-model.assets/image-20201223141710470.png
Normal file
BIN
vue/表单输入绑定v-model.assets/image-20201223141710470.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
@ -153,10 +153,13 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
|
|||||||
|
|
||||||
```
|
```
|
||||||
<div id="example-6">
|
<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>
|
||||||
|
<option>D</option>
|
||||||
|
<option>E</option>
|
||||||
|
<option>F</option>
|
||||||
</select>
|
</select>
|
||||||
<br>
|
<br>
|
||||||
<span>Selected: {{ selected }}</span>
|
<span>Selected: {{ selected }}</span>
|
||||||
@ -172,4 +175,9 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
选择前:![image-20201223141638119](表单输入绑定v-model.assets/image-20201223141638119.png)
|
||||||
|
|
||||||
|
选择后:![image-20201223141710470](表单输入绑定v-model.assets/image-20201223141710470.png)
|
||||||
|
|
||||||
|
使用时需要按ctrl选中多个
|
||||||
|
|
Loading…
Reference in New Issue
Block a user