Vue 组件

组件化规范:Web Components

注册组件 

组件注册注意事项

      1、组件参数的data值必须是函数

      2、组件模板必须是单个跟元素

      3、组件模板的内容可以是模板字符串

      4、在使用组件的时候，只能在字符串模板中用驼峰的方式使用(不建议使用)

      5、在普通的标签模板中，必须使用短横线的方式使用组件

  语法:

       Vue.component('组件名称', {

          data: 组件数据,

          template: 组建模板内容

       })

<div id="app">
	<button-counter></button-counter>
	<!-- 组件是可以重用的,可以有多个,组件中的数据互不影响 -->
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>
<script>
	Vue.component('button-counter', {
		data: function() {
			return {
				count: 0
			}
		},
     // 可以直接将执行写在 @click= 后 , @click="count++"
		template: `<button @click="count++">点击了{
  {count}}次</button>`,
	})
	var vm = new Vue({
		el: '#app',
		data: {

		}
	});
</script>

<div id="app1">
	<button-counter></button-counter>
</div>
<script>
	Vue.component('button-counter', {
		data: function() {
			return {
				count: 0
			}
		},
		// 可以将事件执行的代码写在一个函数中调用@click="handle"
		template: `
        <div>
          <button @click="handle">点击了{
  {count}}次</button>
        </div>
      `,
		methods: {
			handle: function() {
				this.count += 5;
			}
		}
	})
	var vm = new Vue({
		el: '#app1',
		data: {

		}
	});
</script>

        如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

<div id="app2">
	<button-counter></button-counter>
	<hello-world></hello-world>
</div>
<script>
	Vue.component('HelloWorld', {