Vue2+VueRouter2+Webpack+Axios 構建專案實戰2017重製版（七）初識 *.vue 檔案

前情回顧

在上一篇文章《Vue2+VueRouter2+Webpack+Axios 構建專案實戰2017重製版（六）將介面用 webpack 代理到本地》中，我們順利的將介面代理到了本地。需要說明的是， cnodejs.org 的這套介面是沒有跨域問題的，也就是說，本來我們是不需要代理到本地的。但是我們在實際的工作開發中，介面基本上是有跨域問題的，所以我們需要利用代理的方式來解決問題。

在前面的數篇文章中，我們做了很多的工作，又是幹這個，又是幹那個的，但一直沒有切入到正題，那就是我們要做的工作呢，我們要開發的程式碼呢。這一篇博文開始，我們要來開發程式碼了。

什麼是 *.vue 檔案

首先，我們用 vue-cli 腳手架搭建的專案，裡面我們已經遇到了很多，如 index.vue 或者 App.vue 這一的檔案了。這到底是個什麼東西？如果是初次接觸 vue 開發的同學，可能之前沒有見過這個東西。

*.vue 檔案，是一個自定義的檔案型別，用類 HTML 語法描述一個 Vue 元件。每個 .vue檔案包含三種類型的頂級語言塊 <template>, <script> 和 <style>。這三個部分分別代表了 html,js,css。

其中 <template> 和 <style> 是支援用預編譯語言來寫的。比如，在我們的專案中，我們就用了 scss

<style lang="scss">

• 1

html 也有自己的預編譯語言， vue 也是支援的，不過一般來說，我們前端人員還是比較中意 html 原生語言，所以，我就不過多闡述了。

 

另外，我在 App.vue 檔案中，已經用一句 @import "./style/style"; 將我們的樣式給寫到指定的地方去了。所以，在後面所有的我的文章中，是不會出現這個部分的內容的。所有樣式，都會在 src/style/ 資料夾中對應的位置去寫。
  我這樣做的好處是，不需要重複的引入各種 scss 基礎檔案，並且做到了專案的樣式程式碼的可管控。

一個常見的 *.vue 檔案程式碼解析

首先，我們來簡單看一下：

<template>  <div>    <Header></Header>    <div class="article_list">      <ul>        <li></li>      </ul>    </div>    <Footer></Footer>  </div></template><script>import Header from '../components/header.vue'import Footer from '../components/footer.vue'export default {  components: { Header, Footer },  data () {    return {      list: []    }  },  created () {    this.getData()  },  methods: {    getData () {      this.$api.get('topics', null, r => {        console.log(r)      })    }  }}</script><style>  .article_list {margin: auto;}</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

好，以上就是一個簡單的 *.vue 檔案的基本結構。我們一部分一部分的來解釋。

template 部分

 

以下，我不再稱呼它為 *.vue 檔案了。改成為 vue 元件。

首先，一個 vue 元件，他的 template 則代表它的 html 結構，相信大家可以理解了。但是需要注意的是，我們不是說把程式碼包裹在 <template></template> 中就可以了，而是必須在裡面放置一個 html 標籤來包裹所有的程式碼。 本例子中，我們採用了 <div></div> 標籤。

 

我個人不喜歡注意，在 vue1.x 中，也是不需要這樣的。但是不清楚出於什麼原因，vue2.x 開始，就必須這樣去寫。龜腚就是龜腚，我們按照這樣的標準去寫就可以了。

大家看到 <Header></Header> 這個程式碼的時候肯定很奇怪，這是個什麼玩意兒。其實，這是一個自定義元件。我們在其他地方寫好了一個元件，然後就可以用這種方式引入進來。

同樣 <Footer></Footer> 也是一個元件。不再累述。

其他的內容，我們就想這麼寫就怎麼寫了。和寫我們的 html 程式碼沒有什麼太大的區別。

script 部分

首先，我們需要兩個自定義元件，我們先引用進來。如下格式，比較好理解吧。

import Header from '../components/header.vue'import Footer from '../components/footer.vue'

• 1
• 2

其次，除了引用的檔案，我們將所有的程式碼包裹於如下的程式碼中間：

export default {  // 這裡寫你的程式碼，外面要包起來。}

• 1
• 2
• 3

如果你基礎比較好，應該知道為什麼，如果不知道，也沒關係，就這麼寫就可以了。

 

在這個外面也是可以寫程式碼的。但是你先別管這個，學得深了，自然知道怎麼做了。這裡先按照標準的來，不要太節外生枝。

好，我們再說說這裡面的內容。

  components: { Header, Footer },

• 1

如上，我們先引入了 Header 和 Footer 這兩個元件的原始檔，這裡，我們要把引用的元件給申明到 components 裡面去。這樣，我們就可以在 template 裡面使用了。

  data () {    return {      list: []    }  },

• 1
• 2
• 3
• 4
• 5

這裡，是我們的資料。我們的演示程式碼，給了一個 list 的空陣列資料。在 template 中，我們可以使用 this.list 來使用我們的資料。這個我們後面的文章中會講到，這裡不去深入，認識它就可以了。

  created () {    this.getData()  },

• 1
• 2
• 3

這裡，表示當我們的元件載入完成時，需要執行的內容。比如這裡，我們就讓元件在載入完成時，執行一個叫 this.getData() 的函式。

  methods: {    getData () {      this.$api.get('topics', null, r => {        console.log(r)      })    }  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

這裡，是我們的這個元件的方法，也可以說是函式。比如，上面的程式碼就表示，我們的元件自定義了一個叫 getData() 的方法函式。

script 部分，還有其他的內容，比如 watch 之類的。目前，我們還不需要深入到那裡。更多的內容，可以檢視 vue 的官方文件，那裡有更加全面的介紹。

作為初學者，先掌握這麼多的內容就可以了。

style 部分

這裡比較簡單，就是針對我們的 template 裡內容出現的 html 元素寫一些樣式。如上，我的程式碼：

<style>  .article_list {margin: auto;}</style>

• 1
• 2
• 3

就是給我們的 .article_list 元素隨便加了一個樣式。

好，到這裡，我們應該對 vue 元件檔案有了一定的認知。後面的博文中，將會涉及到比較多的各種寫法，因此，建議在閱讀完本文後，花比較多的時間，去檢視 vue 的官方文件。雖然文件你不一定能全部看懂，但要有一個大概的認識，否則下面的學習將會比較困難。

 

如果文章由於我學識淺薄，導致您發現有嚴重謬誤的地方，請一定在評論中指出，我會在第一時間修正我的博文，以避免誤人子弟。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發連結。