vue组件之构建

关键词：构建组件

引入vue.js
* <script src="https://unpkg.com/vue/dist/vue.js"></script>

全局组件

Vue.component('m-title', {
     template:`<div>welcome to ferrinte blog</div>`
  });

模板方式搭建

// 模板（写在script标签外）
<template id="title">
  <div>
    <h1>风景</h1>
    <p>洛阳城里花如雪</p>
    <p>洛阳花开动京城</p>  
  </div>
</template>
<script type="text/javascript">
    Vue.component('m-title', {
     template:'#title'
  });

注册使用

    new Vue({
       el: '#demo',
    });

    <div id="demo">
        <m-title></m-title>
    </div>
    <m-title></m-title>  <!-- 无效 -->

注意

组件只能有一个根元素

全局组件代码一定要在注册代码之前
全局组件不注册无法使用
组件中的data必须是函数

局部组件

var Child = {
  template: '<div>你见或者不见我，我就在那里，不离不弃</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

这种封装也适用于其它可注册的 Vue 功能，如指令。

DOM 模版解析说明
当使用 DOM 作为模版时（例如，将 el选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化HTML 后才能获取模版内容。尤其像这些元素
* <ul>，<ol>，<table>，<select>
限制了能被它包裹的元素， <option>只能出现在其它元素内部。
这种方式是无效的

<table>
 <my-row>...</my-row>
</table>

应该这样写

<table>
  <tr is="my-row"></tr>
</table>

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

<script type="text/x-template">

JavaScript内联模版字符串
.vue 组件

vue组件之构建

推荐阅读更多精彩内容