[Vue.js]学习笔记-Vue.js组件-介绍

范范

[Vue.js]学习笔记-Vue.js组件-介绍

导读部分

---

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

---

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

什么是组件：

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

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册

如何注册组件？

    需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

[HTML] 纯文本查看 复制代码

var MyComponent = Vue.extend({
    // 选项...后面再介绍
})

如果想要其他地方使用这个创建的组件，还得个组件命个名：

[HTML] 纯文本查看 复制代码

Vue.component('my-component', MyComponent)

命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样。

下面来看看一个完整的组件注册和使用例子：

例子：

html代码：

[C#] 纯文本查看 复制代码

<div id="example">
    <my-component></my-component>
</div>

js代码：

[JavaScript] 纯文本查看 复制代码

// 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
    el: '#example'
})

输出结果：

[HTML] 纯文本查看 复制代码

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

Amy

我只是路过打酱油的。

竹林风

强烈支持楼主ing……

站长苏飞

我只是路过打酱油的。

惜

我只是路过打酱油的。