第一个vue组件

gunsmoke

于 2020-05-16 21:29:31 发布

阅读量95

点赞数

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/106165522

版权

vue学习专栏收录该内容

29 篇文章

订阅专栏

<!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>