Vue項目實戰（七）初識 *.vue 文件

 

這一篇介紹什麼是*.vue 文件，公衆號已經準備了vue實戰教程，若是您有須要，能夠在公衆號回覆「vue」獲取。

 

在上一篇博文《Vue項目實戰（六）將接口用 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">

 

html 也有本身的預編譯語言， vue 也是支持的，不過通常來講，咱們前端人員仍是比較中意 html 原生語言，因此，我就不過多闡述了。

 

另外，我在 App.vue 文件中，已經用一句 @import "./style/style"; 將咱們的樣式給寫到指定的地方去了。因此，在後面全部的個人文章中，是不會出現這個部分的內容的。全部樣式，都會在 src/style/ 文件夾中對應的位置去寫。

 

我這樣作的好處是，不須要重複的引入各類 scss 基礎文件，而且作到了項目的樣式代碼的可管控。

我這樣作的好處是，不須要重複的引入各類 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>

 

好，以上就是一個簡單的 *.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'

 

其次，除了引用的文件，咱們將全部的代碼包裹於以下的代碼中間：

export default {
  // 這裏寫你的代碼，外面要包起來。
}

 

若是你基礎比較好，應該知道爲何，若是不知道，也不要緊，就這麼寫就能夠了。

在這個外面也是能夠寫代碼的。可是你先別管這個，學得深了，天然知道怎麼作了。這裏先按照標準的來，不要太節外生枝。

 

好，咱們再說說這裏面的內容。

 

components: { Header, Footer },

如上，咱們先引入了 Header 和 Footer 這兩個組件的源文件，這裏，咱們要把引用的組件給申明到 components 裏面去。這樣，咱們就能夠在 template 裏面使用了。

 

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

這裏，是咱們的數據。咱們的演示代碼，給了一個 list 的空數組數據。在 template 中，咱們可使用 this.list 來使用咱們的數據。這個咱們後面的文章中會講到，這裏不去深刻，認識它就能夠了。

 

created () {
    this.getData()
  }

這裏，表示當咱們的組件加載完成時，須要執行的內容。好比這裏，咱們就讓組件在加載完成時，執行一個叫 this.getData() 的函數。

 

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

這裏，是咱們的這個組件的方法，也能夠說是函數。好比，上面的代碼就表示，咱們的組件自定義了一個叫 getData() 的方法函數。

 

script 部分，還有其餘的內容，好比 watch 之類的。目前，咱們還不須要深刻到那裏。更多的內容，能夠查看 vue 的官方文檔，那裏有更加全面的介紹。

參考資料：https://cn.vuejs.org/v2/guide/syntax.html

做爲初學者，先掌握這麼多的內容就能夠了。

 

style 部分

 

這裏比較簡單，就是針對咱們的 template 裏內容出現的 html 元素寫一些樣式。以下，個人代碼：

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

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

 

好，到這裏，咱們應該對 vue 組件文件有了必定的認知。後面的博文中，將會涉及到比較多的各類寫法，所以，建議在閱讀完本文後，花比較多的時間，去查看 vue 的官方文檔。雖然文檔你不必定能所有看懂，但要有一個大概的認識，不然下面的學習將會比較困難。