vue中的单文件组件的使用

Vue传统组件的问题

1. 全局组件不能重名
2. 定义组件的时候，一个组件中可以有JS、有html模板、但是无法定义css样式
3. JS高级语法无法施展
4. 使用字符串定义组件模板十分丑陋，也无语法高亮和代码提示

Vue单文件组件的用法

基本语法规则

1. 每个组件都是一个后缀名为.vue的文件
2. 每个组件内部都可以有 template、script、style 三个定义区域
3. 可以style标签中加入 scoped 属性设置样式私有

比如：

<template>
<!-- 模板区域 -->
    <div>
       <p>Hello World</p>
    </div>
</template>


<script>
// 脚本区域
export default {
    data() {
        return {
            
        }
    },

    methods: {
        
    }
}
</script>


<style scoped>
/* 样式区域 */

</style>

在其它文件中使用单文件组件

只需要导入即可

import App from './App.vue'