vue - 組件的建立

時間 2019-11-13

標籤 vue 組件建立简体版

原文原文鏈接

組件的建立

vue的核心基礎就是組件的使用，玩好了組件才能將前面學的基礎更好的運用起來。組件的使用更使咱們的項目解耦合。更加符合vue的設計思想MVVM。javascript

那接下來就跟我看一下如何在一個Vue實例中使用組件吧！html

這裏有一個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.htmljava

相關標籤/搜索