Vue 学习笔记之入门2

在第一篇入门文章中对 Vue.js 有了一个初步的认识，并且能够使用已有的知识完成简单实例的开发尝试——Todo List，如果有兴趣可以到我的Github中查看，感觉小有成就感。

本文则继续入门学习，学习下Vue中重要的内容——组件。

概述

组件是Vue中非常重要的部分，可以用来扩展HTML元素或者用于封装可复用代码，给开发带来更多的灵活性。

注册

组件在使用之前必须要先完成注册，注册有两种方式，全局注册和局部注册，通过全局注册的方式可以使组件在任意Vue实例中使用，而使用局部这次的方式则注册的组件只能用于当前Vue实例中。

全局注册

通过Vue.component(tagName, options)的方式来注册一个全局的组件。

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

// 使用

  

局部注册

在Vue实例创建时通过components属性来注册仅能在当前实例中使用的组件。

var Child = {
  template: '
A custom component!
'
}
new Vue({
  // ...
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

注意

由于HTML的一些限制，一些特殊的HTML标签对包裹的标签进行了限制，这使得使用自定义组件时，若添加在受限的标签内部的话，就会出现不能解析的情况，导致无效，例如

，
，，。

在这种情况下，可以使用is属性来解决。

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：