组件介绍
组件是Vue.js中一个非常重要的概念，它是一种抽象，提供独立，可复用的小组件来构建大型应用。你可认为所见任意类型的网页都可抽象为一个组件树，比如像下面这样的：
引入组件的目的是扩展HTML元素，并不是为了代替HTML元素(事实上组件更像是自定义的HTML标签，类似于XML)，同时组件可封装一些使用频率较高的HTML代码，实现代码的高复用。
组件使用
组件的使用分为3个步骤：第一，创建组件构造器；第二，注册组件；第三，使用组件。第一，创建组件构造器，使用Vue.extend()方法(请注意不是extends方法)，里面传入一个选项对象。第二，注册组件，使用Vue.components()方法，里面传入2个参数，第1个是参数组件标签，第2个参数是一个组件构造器(当然也可以是选项对象，使用选项对象的template属性定义组件模板。使用这种方式Vue会自动地调用Vue.extend()方法)。第三，使用组件，必须在Vue实例的作用范围内使用组件，否则不会生效。
运行结果：
仔细观察发现组件确实就是自定义的XML标签。注意：调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
new Vue({ el:"#test", });运行结果：
结果和上面一样！但是你单纯的只是使用这个组件，而不放在挂载元素下方是不会生效的，就像下面的例子。
局部注册
前面说了调用Vue.component()注册组件时，组件是被全局注册，那如果仅仅只是想让某个组件只在某个实例内使用，那该如何注册呢？这时局部注册就产生了。你可以在选项对象的components属性中实现局部注册，其实就是直接在Vue的实例中注册，举个例子：
运行结果：
此时你再将这个组件挂载到id非hello的元素上时，运行发现没有内容输出：
父组件与子组件
组件之间的嵌套使用形成了父组件与子组件这种关系。
运行结果：
首先创建了一个child组件构造器，然后在parent组件中直接引入child的组件标签，同时将child组件以局部注册方式注册到parent中，最后将parent组件全局注册到Vue实例中。下面是该过程的流程示意图：
需要说明的是child组件在Parent组件以局部方式注册，因此仅在parent组件中使用，child组件标签只能在parent 组件的template中使用。这句话怎么理解？看下面的例子你就知道了：
去掉parent组件中引入的child组件标签
var parent = Vue.extend({ template:"This is the parent component!", components:{ "child-component":child } });
然后再来运行一下代码：
这似乎是意料之中的事，因为尚未使用child组件标签，此时按照如下方式引入：
运行结果：
为什么还是无法显示呢，明明已经引入了子组件标签？其实原因是：当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容决定父组件将要渲染的HTML。父组件之间的内容在运行时，子标签只会当作普通的HTML来执行，而不是标准的HTML标签，因而会被浏览器直接忽视掉，所以无法显示。
理解了这个，再来看这种方式的引入：
自然这种方式也是会报错的，相反只要你在父组件的template中使用了子组件标签，那么这两种方式其实都是可以运行的，即下面这三种方式可以达到相同的效果：
组件注册语法糖
在前面组件使用的第一步是创建组件构造器，每次都需要使用Vue.extend()方法，这个步骤有些多余，Vue.js提供了注册语法糖来解决这个问题。在前面也多次提到过，注册组件可以使用Vue.components()方法，里面传入2个参数，第1个是参数组件标签，第2个参数是一个组件构造器(也可以是选项对象，使用选项对象的template属性定义组件模板，使用这种方式Vue会自动地调用Vue.extend()方法)。其实所谓的语法糖就是直接选项对象来进行构造：
上面是之前的方式，下面是使用语法糖的代码：
上面是使用注册语法糖实现的全局注册，接下来则是使用语法糖实现的局部注册：
运行结果：
细心的你会发现无论是否使用语法糖，局部注册都必须在Vue实例的内部进行，且在components属性中实现局部注册。
模板分离
看到这里肯定会发现我们在template中引入了html代码，这就好像是Java中的JSP一样，这种方式会导致html和jS的高度耦合，不利于代码的扩展，同时降低了代码的可读性。
针对这个情况，Vue提供了三种解决方案：第一：使用
