vue - 组件的创建

组件的创建 

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧！

这里有一个Vue组件的示例：

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div id="app">
    <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="./logo.png"/>
                            </div>
                            <div class="w-r">
                                <button>登录</button><button>注册</button>
                                
                            </div>
                        </div>
                    </div>`
        })

    var app = new Vue({
        el:"#app",
        data:{

        },
        computed:{

        },
        method:{

        },


    })

</script>


</body>
</html>

 

官网：

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

posted @ 2018-07-16 13:40  Alice的小屋  阅读(220)  评论(0)  编辑  收藏  举报