Vue单文件组件

非单文件组件有个弊病就是css样式不能跟着组件走, 而且非单文件组件中template配置字符串不太方便

1. 单文件组件结构

<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件交互相关的代码(数据、方法等)
</script>
<style>
/* 组件的样式 */
</style>

单文件组件需要结合webpack使用，不能直接返回到前端，因为浏览器不能识别.vue后缀名文件并且也不支持import语法。 其中<template>写html节点信息，<template>作用就是区分开script和style。 但是<template>标签并不会写入到返回浏览器的html中，同时<template>里面编写和多文件组件一样要求需要有一个根节点。
单文件组件编写如下：

<template>
  <div class="hello">
    <h1>{{ schoolName }}</h1>
  </div>
</template>

<script>
/**
 * 为了别人使用使用方便需要将js暴露出去，由于别人使用方式是import, 所有需要export, 而暴露出去方式有很多，
 * 命名暴露针对同时暴露多个，使用的话：import {Aaa,Bbb} from 'xxx',一般单文件组件使用默认暴露足够
 */ 
const school = Vue.extend({
  name: 'School',
  data() {
    return {
      schoolName: '清华'
    }
  }
})
export default school
/* 
 * 如果我们暴露的只有一个建议使用默认暴露，
 * 默认暴露同时方便使用者使用，直接import ??? from ''
 */
// 默认暴露可以直接简写为
export default Vue.extend({
  name: 'School',
  data() {
    return {
      schoolName: '清华'
    }
  }
})
/* 
 * Vue.extend(option)可以简写为option, 也就是可以直接暴露option对象
 * 这种方式也是使用最多的方式
 */
export default {
  name: 'School',
  data() {
    return {
      schoolName: '清华'
    }
  }
}
</script>