vue组件化可以调用html页面,vue组件-Vue全局组件-组件化与模块化-Vue组件使用-Vue组件开发规范-Vue使用组件-嗨客网...

Vue全局组件教程

Vue 组件的出现，就是为了拆分

Vue 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织。

Vue 组件是可复用的 Vue 实例，且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用。

组件化和模块化的区别

组件化

是从 UI 界面的角度进行划分的。

前端的组件化，方便 UI 组件的重用。

模块化

是从代码逻辑的角度进行划分的。

方便代码分层开发，保证每个功能模块的职能单一。

Vue全局组件详解

语法

var com = Vue.extend({

template:'

使用 Vue.extend 来创建 Vue 全局组件

'//通过template属性，指定了组件要展示的HTML结构

})

//使用 Vue.component('组件名称', 创建出来的组件模板对象)

Vue.component('componentname', com)

var vm = new Vue({

el : '#app'

});

说明

我们首先使用 Vue.extend() 方法来创建一个全局的 Vue 组件，然后通过 template 属性，指定了组件要展示的 HTML 结构。接着使用 Vue.component() 将组件名称和组件的模板对象进行绑定。

如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可，这种创建的组件是 Vue 全局组件。

如果定义的组件名是驼峰命名的形式，那么我们在页面调用的时候，需要将驼峰命名法的形式改成 - 不然引用不成功

案例

Vue全局组件使用

使用 Vue.extend 来创建 Vue 全局组件

嗨客网(www.haicoder.net)

var com1 = Vue.extend({

template:'

使用 Vue.extend 来创建 Vue 全局组件

'//通过template属性，指定了组件要展示的HTML结构

})

//使用 Vue.component('组件名称', 创建出来的组件模板对象)

Vue.component('mycom1', com1)

Vue.component('myCom1', com1)

var vm = new Vue({

el : '#app'

});

浏览器运行效果，如下图所示：

我们首先使用 Vue.extend() 方法来创建一个全局的 Vue 组件，该全局组件要展示的 HTML 结构就是一个 h3 标签。

接着使用 Vue.component() 将组件名称 mycom1 和组件的模板对象 com1 进行绑定。接着我们再次使用 Vue.component() 将组件名称 myCom1 和组件的模板对象 com1 进行绑定。

最后，我们以 HTML 标签的形式，将组件引入到了页面中。

Vue全局组件使用

使用 Vue.extend 来创建 Vue 全局组件

嗨客网(www.haicoder.net)

// 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的内容

Vue.component('mycom1', Vue.extend({

template:'

使用 Vue.extend 来创建 Vue 全局组件

'

}))

var vm = new Vue({

el : '#app'

});

浏览器运行效果，如下图所示：

Vue.component 的第二个参数可以直接使用 Vue.extend 来写。

Vue全局组件总结

Vue 组件的出现，就是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

如果定义的组件名是驼峰命名的形式，那么我们在页面调用的时候，需要将驼峰命名法的形式改成 - 不然引用不成功。