Vue组件

wyf.world

已于 2022-05-22 21:37:11 修改

阅读量106

点赞数

文章标签： vue.js javascript bootstrap

于 2022-05-22 21:35:47 首次发布

本文链接：https://blog.csdn.net/weitunfei/article/details/124916822

版权

一.vue组件概述

组件：是由HTML、CSS、JavaScript所组成，是把网站中某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】

组件基础 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/components.html 1.创建组件

// 1、创建组件
        /**
         * 参数一：组件名称
         * 参数二：组件的组成【对象】
         */
        Vue.component("button-count",{
            template:"<button @click='count++'>{{count}}</button>",
            data:function () {
                return {
                    count:0
                }
            },
            methods:{}
        });

2.使用组件

<button-count></button-count>
<button-count></button-count>
<button-count></button-count>

注意：

定义组件在JavaScript中，在JavaScript中区分大小写

在html中使用组件，html不区分大小写

在JavaScript中定义组件，并且组件名称是组合词，首字母大写，那么在html中使用组件，默认是单词和单词之间用-分割

ButtonCount button-count

button-count button-count

二.组件注册方式

组件注册方式：1、全局注册 2、局部注册

1.全局注册组件：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】

Vue.component("组件名称",{
  template:"模板【html】",
  data:function(){
    return {}
  },
  methods:{}
});

2.局部注册组件：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

    <div id="app">

        <button-count></button-count>

    </div>


    <script>

        let ButtonCount = {
            template:"<h1>这是一个组件</h1>"
        }

        new Vue({
            el:"#app",
            components:{
                ButtonCount
            }
        });

    </script>

</body>
</html>

三.组件注册优化

1、模板需要写在template标签中，template标签写在容器外部

2、在template标签中只能有一个根标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

    <div id="app">

        <button-count></button-count>

    </div>


<!--    定义模板-->
    <template id="bId">
        <div>
            <h1>这是一个组件</h1>
            <h2>这是一个H2标签</h2>
        </div>
    </template>


    <script>

        let ButtonCount = {
            template:"#bId",
            data:function () {
                return {
                    count:0
                }
            }
        }

        new Vue({
            el:"#app",
            components:{
                ButtonCount
            }
        });


    </script>

</body>
</html>

四.is属性

在html中有一些父子标签，在父标签中只能有特定的子标签【严格规范】【table、ul、ol、dl.....】，如果把子标签封装成组件，在父标签中通过传统方式使用组件，那么会出现显示的效果问题，我们需

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

<div id="app">

    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody is="BaseTbody"></tbody>

        <tfoot>
            <tr>
                <td colspan="3">尾部信息</td>
            </tr>
        </tfoot>
    </table>
</div>

<template id="tbodyTemp">
    <tbody>
        <tr>
            <td>1</td>
            <td>魏云飞</td>
            <td>21</td>
        </tr>
    </tbody>
</template>

<script>

    let BaseTbody = {
        template:"#tbodyTemp"
    }

    new Vue({
        el:"#app",
        components:{BaseTbody}
    });

</script>

</body>
</html>

要通过is进行使用组件

wyf.world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件

一.vue组件概述组件：是由HTML、CSS、JavaScript所组成，是把网站中某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】组件基础 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/components.html1.创建组件// 1、创建组件 /** * 参数一：组件名称 * 参数.
复制链接

扫一扫