本文链接： https://blog.csdn.net/poppy995/article/details/98341549

Vue组件开发、

将不同的功能封装到不同的组件中，再将组件组个起来，实现完整的功能

开发思想

标准分治重用组合
组件化规范Web Components
自定义组件存在的问题
方式不容易
多次使用组件可能会导致冲突
Web Components 是通过创建封装好功能的定制元素解决上述问题但是目前这个组件没有被浏览器广泛的支持，vue实现了上述规范的部分

组件使用

全局组件注册语法–必须在vue实例对象中的el的使用区域内使用

Vue.component('组件名称',{
  data:组件数据,
  template: 组件模块内容
})

定义好组件之后用标签的形式进行使用<组件名称></组件名称>
在组件内部，可以定义函数(methods:{})，在template中可以使用methods中的方法，直接写名字就好
组件可以多次使用，并且每个组件的数据都是相互独立的，是互不影响的
组件注册代码示例

<body>
  <div id="app">
    <button-count></button-count>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    Vue.component('button-count', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button @click="countAdd">点击了{{count}}</button>',
      methods: {
        countAdd: function () {
          this.count += 3;
        }
      }
    });
    var vm = new Vue({
      el: '#app'
    })
  </script>
</body>

组件的注意事项

data是一个函数，返回值是一个对象，主要是为了形成一个闭包的环境
组件的模板只能包含一个根元素，如果要放多个控件，要用盒子包起来
组件模板内容可以是模板字符串，需要浏览器支持以为是es6
命名方式短横线方式和驼峰方式
如果使用驼峰式命名组件，在使用组件的时候们只能在字符串模板中使用驼峰式组件，但是在普通的标签模板中(HTML)必须使用短横线方式使用组件，注意既使定义的时候使用的是驼峰式在使用在HTML中还是可以使用短横线的方式的

局部组件注册

只能在注册他的父组件中使用
是写在vue的实例对象的component属性中的，和全局的写法差不多，但是可以在外面就把对象定义好，再引用

调试工具安装

克隆仓库https://github.com/vuejs/vue-devtools
安装依赖包 npm install
构建 npm run bulid
打开Chrome拓展页面
选中开发者模式
加载已解压的拓展，选择shells/chrome
可以直接在google应用商店直接查找安装

Vue组件开发的基本思想和使用