首页 > 代码库 > 组件快速入门
组件快速入门
前言
最近开始在学vue相关的内容。组件这章的内容比较多。看了http://www.cnblogs.com/keepfool/p/5625583.html这篇博客,博主总结的还比较全面也挺清晰,可是这篇博客的知识点跟实例都是基于vue 1.0版本的,所以参考这篇博客,我将vue2.0版本中的相关知识点做了一个总结。算是自己学习的一个笔记
什么是组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。我们可以将组件看成是封装好的HTML元素。
本文的所有代码,都放在github上面https://github.com/xuxiaozhi/vue-tutorial,有需要的可以下载查看。
组件的注册和使用
全局注册
注册一个组件
要注册一个全局组件,你可以使用 Vue.component(tagName, options)
来注册。如下实例:
//1、注册一个全局的组件。要确保在初始化实例之前注册 Vue.component(‘my-component‘,{ template:"<div>这是第一个组件</div>" }) //创建跟实例 new Vue({ el:"#app" })
使用组件
组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component>
的形式使用。
注意:要确保组件是在初始化实例之前注册,要不然使用的时候会报错
<div id="app"> <my-component></my-component> </div>
组件使用后在页面中,将渲染成以下结构
局部注册组件
我们不必全局注册每一个组件,根据实际情况需要,我们可以采用局部注册的方式注册组件。如下实例
new Vue({ el:"#app", components:{ ‘my-component‘:{ template:"<div>这个是局部注册的组件</div>" } } })
?注意
局部注册的组件仅在当前注册的实例或者组件内部使用。在其他地方引用将会报错,如下:
<div id="app"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div>
在上述实例中,我们在”#app“元素所在的实例中,注册了一个组件,然后在“#app”和“#app2”内引用,查看源代码发现,只有“#app”内的组件渲染成了html代码,而在“#app2”内只是一个无意义的标签,如下图所示:
字符串模板
在组件中,我们一般使用字符串模板,字符串模板,主要有以下三种形式
- 使用
script
标签 - 使用
template
标签 - 单文件组件
使用<script标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件相关</title> </head> <body> <div id="app"> <my-component></my-component> </div> <script type="text/x-template" id="myComponent"> <div>这是script模板</div> </script> </body> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript"> //全局注册一个组件 Vue.component(‘my-component‘,{ template:"#myComponent" }) new Vue({ el:"#app" }) </script> </html>
- 需要给script设置一个id,使用的时候,直接引用该id即可
- 使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本,浏览器在解析HTML文档时会忽略<script>标签内定义的内容。
使用template标签
template标签的用法跟script是一样的,区别在于template标签不需要设置type,直接设置一个id即可,一般情况下,我们建议使用这种方式来创建模板。如下所示
<template id="myComponent"> <div>这是script模板</div> </template>
组件快速入门