Vue单文件组件支持

1. 前言

uni-app 是基于vue 的一套全端解决方案,uni-app页面文件的开发规范遵循的是 Vue 单文件组件 (SFC) 规范。

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

2. 什么 Vue.js 单文件组件

Vue 单文件组件主要是一个 .vue 文件,这是一个自定义的文件类型,一个 .vue 文件就是一个单文件组件。

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

uni-app 只支持 vue 单文件组件(.vue 组件)。其他的诸如:动态组件,自定义 render,和<script type="text/x-template">字符串模版等,在非H5端不支持。

3. 三大顶级语言块

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

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

3.1 创建 .vue 文件

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

pages 文件夹下面就会创建一个 imoocPage 文件夹,下面包含了一个 .vue 文件。

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

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

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

<style>
</style>

3.2 <template> 部分

每个 .vue 文件最多包含一个 <template> 标签。<template> 里面包含 html 代码,在这里面定义了页面模板,也就是页面上显示的内容。在 <template> 标签的下一级只能有一个子节点元素,如果有多个子节点元素就会报错。

正确实例:

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

错误实例:

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

3.3 <script>部分

每个 .vue 文件最多包含一个 <script> 标签,<script> 里面包含 js 代码,在这里面定义了页面的数据以及逻辑函数。

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

1. data对象

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

正确实例:

data () {
  return {
    mark: 0
  }
}

错误实例:

data: {
  mark: 0
}

2. methods对象

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

实例:

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

3.4 <style>部分

一个 .vue 文件可以包含多个 <style> 标签,<style> 部分比较简单,包含 css 代码,定义了页面的样式。

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

实例:

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

vue-loader 支持使用非默认语言,通过设置 <style> 标签的 lang 属性,就可以使用Sass 语法编写样式。

实例:

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

4. 重要属性

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

4.1 lang 属性

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

实例:

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

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

4.2 src 属性

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

实例:

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

5. 小结

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

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

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

  • 了解 Vue 单文件组件的含义;
  • 了解并掌握三大顶级语言块 <template><script><style>的应用;
  • 了解并掌握顶级模块相关的重要属性。