一、什么是组件

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

二、全局注册

全局注册:当vue创建的时候,不管这个组件是否使用,都会被加载,这样的方式会比较占内存

入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--    组件-->
    <button-count></button-count>
</div>
</body>
</html>
<script>
    //编写组件
    //参数一:自定义的组件名称【注意:不要全大写,如果是二个单词拼接,最好都是小写,用-连接】
    //参数二:对象
    Vue.component('button-count', {
        template: "<button @click='count++'>{{count}}</button>",
        data: function () {
            return {
            }
        }
    })
    
    new Vue({
        el: '#app',
    })
</script>

注意: 在注册vue组件的时候,一定不能忽略new Vue

三、局部注册

局部注册:当我们使用到某个组件,该组件才会被创建,如果不使用该组件,那么该组件不会被创建。

<!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:{
                //当组件名称二个首字母大写的时候
                //html在识别的时候,会全部转换为小写,并且二个字母之间用-连接
                //当变量名称和属性名称相同的时候,可以只写一个
                ButtonCount
            }
        });

    </script>

</body>
</html>

无论怎么注册,html都比较麻烦,还需要写到script里面去,所以需要优化一下组件注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <handle-text></handle-text>
</div>

<!-- 一定要在容器外面,创建一个template标签-->
<template id="ID">
<!--这个id就是外面声明变量template属性的属性值
    最后把要写的html写到template标签里面
-->
<div>
    <h1>我是h1</h1>
</div>
</template>
</body>
</html>
<script>
    let HandleText = {
        //在这个对象里面存放template属性和一个自定义的属性值
        template: '#ID'
    }
    new Vue({
        el:'#app',
        components:{
            HandleText
        }
    })
</script>

注意:因为是组件,所以这个template标签里面只能有一个根标签

四、为什么在vue局部组件里面要有一个data函数

Logo

前往低代码交流专区

更多推荐