碎言博客

Vue快速学习笔记(3)Vue的组件

J.sky 2020-02-04 15:08:07 Vue

Vue中的组件

首先注册组件:

    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

需要一个组件名称和组件的代码模板,组件中的数据和Vue实例的数据不同,一个组件的data选项必须是一个函数。

定义模板

<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

编写Vue实例,完整代码如下:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

<div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>

<script>
    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

    vm = new Vue({
        el:'#app'
    })

</script>

如上,就可以实现一个全局的组件注册,可以重复使用。

发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699