Vue單文件組件支持

1. 前言

uni-app 是基于vue 的一套全端解決方案，uni-app頁面文件的開發(fā)規(guī)范遵循的是 Vue 單文件組件 (SFC) 規(guī)范。

這一小節(jié)我們主要了解一下 Vue 單文件組件規(guī)范是什么，以及 Vue 單文件組件包含的三個頂級語言塊的應用。學完之后可以更加順利的進行接下來的開發(fā)學習。

2. 什么 Vue.js 單文件組件

Vue 單文件組件主要是一個 .vue 文件，這是一個自定義的文件類型，一個 .vue 文件就是一個單文件組件。

用類 HTML 語法描述一個 Vue 組件，每個 .vue 文件包含三種類型的頂級語言塊，分別是 <template>、<script> 、 <style>。除了這三種類型的頂級語言塊，還允許添加可選的自定義塊。

uni-app 只支持 vue 單文件組件（.vue 組件）。其他的諸如：動態(tài)組件，自定義 render，和<script type="text/x-template">字符串模版等，在非H5端不支持。

3. 三大頂級語言塊

下面我們來介紹一下三大頂級語言塊 <template>、<script> 和 <style>。

創(chuàng)建好 .vue 文件后，vue-loader 會幫助我們解析文件，它會提取每個語言塊，將他們組裝成一個 CommonJS 模塊，默認會導出一個 Vue.js 組件對象。

3.1 創(chuàng)建 .vue 文件

我們用 HBuilderX 這個官方工具來創(chuàng)建 .vue 文件，右鍵點擊 pages 文件夾，點擊新建頁面，命名為 imoocPage。

pages 文件夾下面就會創(chuàng)建一個 imoocPage 文件夾，下面包含了一個 .vue 文件。

.vue 文件中會幫我們默認創(chuàng)建 <template>、<script> 和 <style>這三大頂級語言塊。

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

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

<style>
</style>

3.2 <template> 部分

每個 .vue 文件最多包含一個 <template> 標簽。<template> 里面包含 html 代碼，在這里面定義了頁面模板，也就是頁面上顯示的內容。在 <template> 標簽的下一級只能有一個子節(jié)點元素，如果有多個子節(jié)點元素就會報錯。

正確實例：

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

錯誤實例：

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

3.3 <script>部分

每個 .vue 文件最多包含一個 <script> 標簽，<script> 里面包含 js 代碼，在這里面定義了頁面的數(shù)據(jù)以及邏輯函數(shù)。

這個部分默認導出是一個 Vue.js 的組件對象，也可以導出由 Vue.extend() 創(chuàng)建的擴展對象，但是Vue.js 的組件對象是更好的選擇，所以這部分了解一下就可以了，導出的部分一般不需要我們操作。

1. data對象

data 里面定義的是本頁面操作的數(shù)據(jù)變量，data 選項必須是一個函數(shù)，不然 Vue 實例之間可能會相互影響。比如我們要定義一個 mark 變量：

正確實例：

data () {
  return {
    mark: 0
  }
}

錯誤實例：

data: {
  mark: 0
}

2. methods對象

methods 對象里面定義的是邏輯函數(shù)，我們在里面定義一個 addMark 函數(shù)，并在里面打印在上面 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 單文件組件中，頂級模塊的標簽上面有幾個比較重要的屬性，我們日常開發(fā)經(jīng)常會用到，來了解一下。

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 項目的開發(fā)效率、可讀性、復用性等。也大幅度降低了我們的學習成本。

Vue 單文件組件是 uni-app 項目的基礎組成部分，所以在開始開發(fā) uni-app 項目之前，我們一定要了解Vue 單文件組件的應用，不然后續(xù)的開發(fā)會有比較大的阻礙。

本節(jié)主要介紹了 Vue 單文件組件的應用，以及 <template>、<script> 和 <style>三大頂級語言塊的解析，本節(jié)的重點如下：

• 了解 Vue 單文件組件的含義；
• 了解并掌握三大頂級語言塊 <template>、<script> 和 <style>的應用；
• 了解并掌握頂級模塊相關的重要屬性。