Vue 单文件组件

传统组件的问题和解决方案

-1、问题

1、全局定义的组件必须保证组件的名称不重复

2、字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \

3、不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏

4、没有构建步骤限制，只能使用HTML和ES5JavaScript，而不能使用预处理器（如：Babel）

-2、解决方案

针对传统的组件问题，Vue提供了一个解决方案——使用Vue单文件组件

Vue单文件组件的基本使用方法

单文件组件的组成结构

• template 组件的模块区域
• script  业务逻辑区域
• style  样式区域

<template>
　　<!-- 这里用于定义Vue组件的模板内容 -->
</template>

<script>
　　//这里用于定义Vue组件的业务逻辑
　　export default {
　　　　data: (){ return{} }, //私有数据
　　　　methods: {} //处理函数
　　　　// ...其他业务逻辑
}
</script>

<style scoped>
　　/*这里用于定义组件的样式*/
</style>