关键词：构建组件
引入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 组件
