### Vue
------
**element---网站组件效果形式**
- vue的基本使用
- ```shell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<script src="./js/vue.js"></script>
<script src="./js/axios,min.js"></script>
</head>
<body>
<div id="app">
<div>{{ msg }}</div>
<button v-on:click='Fnadd'>点击</button>
<a v-bind:href="url">百度</a>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'mlpy',
url:'http://www.baidu.com'
},
methods:{
Fnadd:function(){
alert(this.msg)
},
axios.get({
reponse =>{
name = reponse.data
}
})
}
})
</script>
</body>
</html>
```
- #app(div+button)
------
#### 全局组件
注册定义：
```shell
Vue.component(
'zujian_all',
{
template:'<div>这是个全局组件</div>'
}
)
```
- 定义：
- 第一个参数：组件名
- 第二个参数是一个：{}
- template属性指定html标签内容
- 调用：
- 把组件名作为标签进行调用
- ```shell
<zujian_all></zujian_all>
```
#### 局部组件
- 定义局部组件（要定义在全局组件之前,否则先加载全局无法读取局部）
- ```shell
var zujian_a = {
template:'<div>这是个局部组件</div>'
}
```
- 将局部组件添加到全局中
- ```shell
Vue.component(
'zujian_all',
{
template:'<div>这是个全局组件 <zujian_a></zujian_a> </div>',
components:{
zujian_a # 此处是对局部组件的添加，注意是components
}
}
)
```
------
#### data属性的使用
- 组件中绑定数据，在data方法中指定返回值：
- ```shell
var zujian_a = {
template:'<div>这是个局部组件</div>',
data:function(){
return{
btitle:'实心'
}
}
}
Vue.component(
'zujian_all',
{
template:'<div>这是个全局组件 <zujian_a></zujian_a> {{ age }}</div>',
components:{
zujian_a
},
data:function(){
return{
age : 10
}
}
}
)
```
------
#### 父子组件互相传值
##### 父传子
- 在子中用props指定变量 props:['pos']
- 然后在父中进行变量中的绑定 v-bind:pos="age"
- 然后子中就可以映射父中的变量值
```shell
var zujian_a = {
template:'<div>这是个局部组件 {{ btitle }} {{ pos }}</div>',
data:function(){
return{
btitle:'实心'
}
},
props:['pos']
}
Vue.component(
'zujian_all',
{
template:'<div>这是个全局组件{{ age }} <zujian_a v-bind:pos="age"></zujian_a></div>',
components:{
zujian_a
},
data:function(){
return{
age:10
}
}
}
)
```
 |
|
收藏
淘帖
踩
