03 组件

1、组件

官网 https://cn.vuejs.org/v2/guide/components-registration.html

1、认识组件

2、组件的创建与复用

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!--组件的复用  -->
        <Vheader></Vheader>
        <Vheader></Vheader>
        <Vheader></Vheader>
    </div>


    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">
    
        //组件的创建
        Vue.component('Vheader',{
            //一定是函数 必须要有返回值
            data:function(){
                return{
                    // 必须要return，哪怕是空对象
                }
            },
            template:`  <div class="header">
                            <div class="w">
                                <div class="w-l">
                                    <img src="./images/logo.gif" alt="">
                                </div>
                                <div class="w-r">
                                    <button>登录</button>
                                    <button>注册</button>
                                </div>
                            </div>
                        </div>`

        })


        // vue实例
        var app = new Vue({
            el: "#app",
            data:{

            },
            computed:{

            },
            methods:{

            }
        })
    
    </script>
</body>
</html>

 

 

 

 

3、组件传递数据

生命周期：刚开始的时候，取数据

 

 

 

posted @ 2019-09-19 23:25  venicid  阅读(145)  评论(0)  编辑  收藏  举报