您的位置: 首页  >  IT文章  >  Vue学习—组件的学习

Vue学习—组件的学习

分类: IT文章 • 2023-11-24 08:29:14

1、什么是组件？

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

定义组件一般有以下三种方式

组件形式一：使用script标签

示例代码：

Vue学习—组件的学习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的学习</title>
</head>
<style>
    .box{
        border: 3px solid silver;
        padding: 0.3em 1em;
        border-radius: 3px;
    }
    /*选择第一个之外的
      :not(:first-child):not(:last-child) 选择非第一个和最后一个
    */
    .box:not(:first-child){margin-top: 10px;}
    .box h2{margin: 0.2em 0;}
</style>
<body>
<div >
    <h2 style="text-align: center">{{title}}</h2>
    <my-box ></my-box>
    <my-box ></my-box>
    <my-box ></my-box>
</div>
<script type="text/x-template" >
    <div class="box" @click='getinfo(id)'>
        <img width="120" v-bind:src="imgurl"/>
        <h2>{{text}}</h2>
    </div>
</script>
<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
    Vue.component("my-box",{
        template:"#template",
        props:[
            "id",
            "text",
            "imgurl"
        ],
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:'#app',
        data:{
            title:"组件学习",
        },

    })
</script>
</body>
</html>
Vue学习—组件的学习

运行效果：

Vue学习—组件的学习


注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

组件形式二：使用template标签

示例代码：

1、

Vue学习—组件的学习
<div >
    <h2 style="text-align: center">{{title}}</h2>
    <my-box ></my-box>
    <my-box ></my-box>
    <my-box ></my-box>
</div>
<template >
    <div class="box" @click='getinfo(id)'>
        <img width="120" v-bind:src="imgurl"/>
        <h2>{{text}}</h2>
    </div>
</template>

<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
    Vue.component("my-box",{
        template:"#template",
        props:[
            "id",
            "text",
            "imgurl"
        ],
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:'#app',
        data:{
            title:"组件学习",
        },

    })
</script>
Vue学习—组件的学习

2、

Vue学习—组件的学习
<div >
    <h2 style="text-align: center">{{title}}</h2>
    <my-box ></my-box>
    <my-box ></my-box>
    <my-box ></my-box>
</div>
<script>
    //创建组件构造器
    let probox = Vue.extend({
        props:[
            "id",
            "text",
            "imgurl"
        ],
        template:`<div class="box" @click='getinfo(id)'>
                        <img width="60" v-bind:src="imgurl"/>
                        <h2>{{text}}</h2>
                        </div>`,
        methods:{
            getinfo(e){
                alert(e)
            }
        },
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:'组件的学习',
            errorurl:"./images/3.png"
        },
        components:{
            "my-box":probox,
        },
    })
</script>
Vue学习—组件的学习

 运行效果：

Vue学习—组件的学习

组件形式三：使用vue文件

这种方法常用在vue单页应用（SPA）中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html 
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

相关推荐