炫意html5
最早CSS3和HTML5移动技术网站之一

入门教程 – vue.js 2.0 组件

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

使用组件

注册

之前说过,我们可以通过以下方式创建一个 Vue 实例:

new Vue({
el: '#some-element',
// 选项
})

要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:

Vue.component('my-component', {
// 选项
})

对于自定义标签名,Vue.js 不强制要求遵循 [W3C规则](https://www.w3.org/TR/custom-elements/#concepts) (小写,并且包含一个短杠),尽管遵循这个规则比较好。

组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件:

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

渲染为:

<div id="example">
<div>A custom component!</div>
</div>

炫意HTML5 » 入门教程 – vue.js 2.0 组件

CSS3教程HTML5教程