首页 > 代码库 > 组件快速入门

组件快速入门

2024-11-06 06:51:40   210人阅读

前言

最近开始在学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>
 注意点：
  1. 需要给script设置一个id,使用的时候，直接引用该id即可
  2. 使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

使用template标签

template标签的用法跟script是一样的，区别在于template标签不需要设置type，直接设置一个id即可，一般情况下，我们建议使用这种方式来创建模板。如下所示

 

        <template id="myComponent">
            <div>这是script模板</div>
        </template>

 

 

 

 

组件快速入门


联系
我们