黑马程序员技术交流社区

标题: vue [打印本页]

作者: gamadi    时间: 2019-6-21 14:26
标题: vue
### 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
                    }
                }
            }
        )
```








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2