vue.js中组件的创建和使用方法

vue.js中创建组件有三个步骤：创建组件构造器，注册组件以及使用组件。

一、创建组件构造器

  创建组件构造器的方法很简单，只需要以下语句即可：
  var MyCompontent=Vue.extend({...});
  然而这个时候还不能直接使用组件，需要把组件注册到应用中。

二、注册组件

  Vue.js提供了两种注册组件的方式，分别为全局注册和局部注册，下边分别介绍：

  全局注册：需要确保在根实例初始化之前注册，这样才能使组件在任意实例中都可以使用。注册方式如下：
  Vue.component('my-component',MyComponent);//此句一定要放在new Vue({...});之前
  注册过程中也指定了组件的HTML标签。本例为;

  局部注册：限定了组件只能在被注册的组件中使用，而无法在其他组件中使用。

三、使用组件

  基于以上对组件的介绍，下边以一个具体的例子说明组件的使用方法。

  全局注册使用方法：

  局部注册使用方法：

  以上代码最终在浏览器的中的渲染结果相同。只是全局注册的my-component标签可以在HTML文档中任何地方使用，而局部注册的my-compoment标签只能在id为app的容器下使用。

四、语法糖表示法

  vue.js对于以上两种注册方法提供了简化方法，我们可以在注册组件的时候定义组件构造器。举例如下：