VUE组件1

我理解的组件就是自己封装的html代码块。
vue可以创建全局的组件，也可以创建局部的组件。
如果我们在创建组件时，在其他地方还会用到这一段html代码，我们可以全局创建一个组件：

new Vue({  el: '#aaa',})Vue.component('my-component', {})

其中my-compontent是我们自定义的标签名，{ }里面是我们代码块的内容，将很多个html标签组合，封装起来。
在一个实例的模版中使用，要注意先定义好组件，在创建vue实例。

// 注册Vue.component('my-component', {  template: '<div>A custom component!</div>'})// 创建根实例new Vue({  el: '#example'})

渲染为：

<div id="example">  <div>A custom component!</div></div>

一个全局的组件就这样封装好了，以后在其他地方就可以复用了。
有时我们并不想要组件的作用域这么大，我们只希望在局部使用这个组件，这样我们就要创建一个局部组件。

var Child = {  template: '<div>A custom component!</div>'}new Vue({  components: {    'my-component': Child  }})

my-component是我么创建的组件名（相当于div、span），
template里面是我们想要封装起来的内容
child是一个中间量
components相当于全局创建的vue.components
在组建中使用某些标签时，vue不能很好的解析，从而出现渲染的问题，其中主要是ol、ul、table、select等内部可以包含其他标签的元素，还有option这种只能出现在特定元素中的标签。
在组建中传入的data标签必须是函数！

var data = { counter: 0 }Vue.component('simple-counter', {  template: '<button v-on:click="counter += 1">{{ counter }}</button>',  data: function () {    return cunter:0  }})new Vue({  el: '#example-2'})

如果这样写的：

Vue.component('my-component', {  template: '<span>{{ message }}</span>',  data: {    message: 'hello'  }})

vue则会停止运行，并且警告。