组件功能介绍

组件可以提高代码的复用性，提高开发效率，让代码结构变得更为简洁，本质思想就是解耦。

官方文档:
https://v3.cn.vuejs.org/guide/component-basics.html

有些时候单页面的项目，就是使用组件组装起来，比较适合团队开发。

例如有一个商品卡片代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding:0;margin:0;}
        body{background: #f4f4f4;}
        .box{ width:200px;border: 1px solid #aaa;padding:5px;background: #fff;
        margin:10px}
        .box img{width: 100%;}
        .box h2{font-size:18px; font-weight: 400;text-align: center;}
        .box .price{ font-size:28px;color: #c00;font-weight: 600;text-align: center;}

    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="box">
            <img src="images/men1-1.jpg" alt="">
            <h2>衬衫</h2>
            <div class="price">￥99.9</div>
        </div>
    </div>
</body>
</html>
<script>
new Vue({
    el:"#app"
})
</script>

效果图:

现在想将商品卡片封装成组件方便重复调用。

定义组件语法

先接触全局组件

首先看看组件的定义语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding:0;margin:0;}
        body{background: #f4f4f4;}
        .box{ width:200px;border: 1px solid #aaa;padding:5px;background: #fff;
        margin:10px}
        .box img{width: 100%;}
        .box h2{font-size:18px; font-weight: 400;text-align: center;}
        .box .price{ font-size:28px;color: #c00;font-weight: 600;text-align: center;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <itembox></itembox>
        <itembox></itembox>
        <div class="box">
            <img src="images/men1-1.jpg" alt="">
            <h2>衬衫</h2>
            <div class="price">￥99.9</div>
        </div>
    </div>
</body>
</html>
<script>
    Vue.component("itembox",{
        template:"<h1>冒险岛好玩不花钱</h1>"
    })  //使用Vue.component()定义一个组件

    new Vue({
        el:"#app"
    })
</script>

31-33行：
使用Vue.component()定义一个组件
Vue.component()中需要填写连个参数，第一个是组件名（也可以说是调用的标签名）,第二个为组件的样式内容
第21、22行直接使用组件名即可调用组件在页面渲染。

测试页面:

可以看到“冒险岛好玩不花钱”成功显示。

多行html代码封装组件

注意：

多行代码封装成组件时使用反引号
多行代码必须要在同一个父标签下

刚刚是单行代码封装成组件，现在将商品卡片代封装进组件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding:0;margin:0;}
        body{background: #f4f4f4;}
        .box{ width:200px;border: 1px solid #aaa;padding:5px;background: #fff;
        margin:10px}
        .box img{width: 100%;}
        .box h2{font-size:18px; font-weight: 400;text-align: center;}
        .box .price{ font-size:28px;color: #c00;font-weight: 600;text-align: center;}

    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <itembox></itembox>
        <itembox></itembox>
        <!-- <div class="box">
            <img src="images/men1-1.jpg" alt="">
            <h2>衬衫</h2>
            <div class="price">￥99.9</div>
        </div> -->
    </div>
</body>
</html>
<script>
    Vue.component("itembox",{
        template:`
            <div class="box">
            <img src="images/men1-1.jpg" alt="">
            <h2>衬衫</h2>
            <div class="price">￥99.9</div>
            </div>
        `
    })  //使用Vue.component()定义一个组件

    new Vue({
        el:"#app"
    })
</script>