Vue组件的简单使用

组件介绍

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

就拿这个美团的外卖模块来说吧，左边的烧烤，卤味等和右边的菜都是组件

借用vue官网的一张图来说，组件之间可以是独立的也可以是也可以是相互依赖的，像1和234就是父子关系，而234就是同级的兄弟关系，而1和5就属于爷孙关系了。

组件的创建

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

列子：

 <div id="app">
        <button-item></button-item>
            </div>
 <script>
        Vue.component('button-item', {
            data: function () {
                return {
                    count: 0
                }
            },
            template:
             `<div>
                <button v-on:click="hand">点击了{{count}}</button>
                    </div>`,
            methods: {
                hand: function () {
                    this.count++
                }
            },
        })
         var vm = new Vue({
            el: "#app",
            data: {

            }
        })


    </script>

这就会出现点击按钮加1的操作
这就是组件简单的使用