第一個vue組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="main">
     <mybar></mybar>
</div>

<script>
    <!--注意這裏的第一個參數最好小寫,如果大寫會出問題,不能寫成myBar,即使和上面的標籤名稱對上也不行-->
    Vue.component('mybar',{
        template:`
            <div>自定義組件
                <button @click="clickMe()">click me</button>
            </div>

        `,
        methods: {
            clickMe() {
                alert('自定義組件')
            }
        }
    });
    new Vue({
        el: '#main',
        data: {

        },
        methods: {
        }
    })
</script>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章