是基于vue 的一套全端案，的开发规范遵循的是 Vue 单组件 (SFC) 规范。

这一小节我们主要了解一下 Vue 单组件规范是什么，以及 Vue 单组件包含的三个顶级语言块的应用。学完之后可以更加顺利的进行接下来的开发学习。

Vue 单组件主要是 .vue ，这是的类型， .vue 就是单组件。

用类 HTML 语法描述 Vue 组件，每个 .vue 包含三种类型的顶级语言块，分别是 <template>、<script> 、 <style>。除了这三种类型的顶级语言块，还允许可选的块。

只 vue 单组件（.vue 组件）。其他的诸如：动态组件， render，和<script type="text/x-template">字符串模版等，在非H5端。

下面我们来介绍一下三大顶级语言块 <template>、<script> 和 <style>。

创建好 .vue 后，vue-loader 会帮助我们解析，它会每个语言块，将他们组装成 CommonJS 模块，认会导出 Vue.js 组件对象。

我们用 HBuilderX 这个官方工具来创建 .vue ，右键点击 pages 夹，点击新建，命名为 imoocPage。

pages 夹下面就会创建 imoocPage 夹，下面包含了 .vue 。

.vue 中会帮我们认创建 <template>、<script> 和 <style>这三大顶级语言块。

<template>
<view>
</view>
</template>

<script>
  export default {
    data() {
      return {
      }
  },
  methods: {
  }
}
</script>

<style>
</style>

每个 .vue 最多包含 <template> 。<template> 里面包含 html ，面定义了模板，也就是上的。在 <template> 的下一级只能有子节点元素，如果有多个子节点元素就会报错。

正确实例：

<template>
  <view>
    ...
  </view>
</template>

实例：

<template>
  <view>
    ...
  </view>
  <view>
    ...
  </view>
</template>

每个 .vue 最多包含 <script> ，<script> 里面包含 js ，面定义了的数据以及逻辑。

这个部分认导出是 Vue.js 的组件对象，也可以导出由 Vue.extend() 创建的扩展对象，但是Vue.js 的组件对象是更好的选择，所以这部分了解一下就可以了，导出的部分一般不需要我们操作。

1. data对象

data 里面定义的是本操作的数据变量，data 选项必须是，不然 Vue 实例之间可能会相互影响。比如我们要定义 mark 变量：

正确实例：

data () {
  return {
    mark: 
  }
}

实例：

data: {
  mark: 
}

2. methods对象

methods 对象里面定义的是逻辑，我们在里面定义 addMark ，并在里面打印在上面 data 对象中定义的 mark 变量。

实例：

methods: {
  addMark () {
  //通过this.data对象中定义的变量
  console.log("mark变量为：",this.mark)
  }
}

.vue 可以包含多个 <style> ，<style> 部分比较简单，包含 css ，定义了的样式。

<style> 有 scoped ，表明它的 CSS 只作用于当前组件中的元素，不同封装模式的多个 <style>可以在同组件中混合使用。

实例：

<style scoped>
  /* write css */
</style>

vue-loader 使用非认语言，通过设置 <style> 的 lang ，就可以使用Sass 语法编写样式。

实例：

<style lang="sass">
  /* write Sass */
</style>

Vue 单组件中，顶级模块的上面有几个比较重要的，我们日常开发经常会用到，来了解一下。

在 <style> 上面，lang 应用的较多，但是很多人不知道，在 <template>、<script> 上面都可以通过 lang 来指定使用的语言。

实例：

<template @H__531@lang@H__533@="jade">
  <div> {{ msg }} </div>
</template>

<script @H__531@lang@H__533@="ts">
  import Vue from 'vue'
  export default Vue.extend({
    data () {
      return {
        msg: 'Hello world'
      }
    }
  })
</script>

如果你习惯将.vue 分隔到多个中，可以通过src 导入外部。

实例：

<template @H__531@src@H__533@="./template.html"></template>
<style @H__531@src@H__533@="./style.css"></style>
<script @H__531@src@H__533@="./script.js"></script>

Vue 单组件的应用大幅度提升了 项目的开发效率、可读性、复用性等。也大幅度降低了我们的学习成本。

Vue 单组件是 项目的基础组成部分，所以在开始开发 项目之前，我们一定要了解Vue 单组件的应用，不然后续的开发会有比较大的阻碍。

本节主要介绍了 Vue 单组件的应用，以及 <template>、<script> 和 <style>三大顶级语言块的解析，本节的重点如下：