Vue中组件(.vue文件)

Posted 2021-03-10 baohanblog

Vue组件

组件的构成

一个.vue文件就是一个组件

组件都是由三部分组成：html结构（html结构都是在template标签中）、js逻辑、css样式

• 1）template只能解析一个根标签
• 2）js逻辑都是在script标签中，必须设置导出，export default {...}
• 3）css样式都是在style标签中，必须设置scoped属性，是样式组件化

<template>
    <div class="first-cp">
         <h1>第一个组件</h1>
    </div>
</template>

<script>
    // .vue文件类似于模块，可以直接相互导入，所以在组件内部要设置导出
    export default {

    }
</script>

<style scoped>
    /* scoped可以使样式组件化，只在自己内部起作用 */

</style>