学习组件与模板

1.注册组件

<body>
    <div class="app">
        <button_i></button_i>
    </div>

    <script>
        Vue.component('button_i', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button @click="jia">点击了{{count}}次<button>',
            methods: {
                jia: function () {
                    this.count++
                }
            }
        })
        var app = new Vue({
            el: '.app',
            data: {
               
            }
        })
    </script>
</body>

基本格式如上

注意：

data必须是函数，并且里面要返回值，

使用模板时，只能有一个根元素，通俗点就是一个大的div包含着

模板的命名规范有短横式和驼峰式 比如：app-vue  AppVue

posted @ 2021-01-22 15:03  小破的博客  阅读(68)  评论(0)  编辑  收藏  举报