首頁 >web前端 >js教程 >初識 Vue.js 中的 *.Vue檔_vue.js

初識 Vue.js 中的 *.Vue檔_vue.js

韦小宝原創: 2018-01-04 10:14:282377瀏覽

vue.js是一套建立使用者介面的漸進式框架，它採用自底向上增量開發的設計.這篇文章主要介紹了Vue.Js 填坑日記之初識*.Vue檔案,需要的朋友可以參考下

什麼是Vue.js？

vue.js是一套建立使用者介面的漸進式框架，它採用自底向上增量開發的設計。（自底向上設計方法是根據系統功能要求，從具體的裝置、邏輯部件或相似系統開始，憑藉設計者熟練的技巧和豐富的經驗，透過對其進行相互連接、修改和擴大，構成所要求的系統。另一方面，當與單一檔案元件和Vue生態系統支援的程式庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動程式。

什麼是*.vue檔案

#首先，我們用vue-cli 鷹架搭建的項目，裡面我們已經遇到了很多，例如index.vue 或是App.vue 這一的文件了。這到底是什麼東西？如果是初次接觸 vue 開發的同學，可能之前沒有見過這個東西。 *.vue 文件，是一個自訂的文件類型，用類似HTML的語法描述一個Vue元件。每個.vue檔案包含三種類型的頂層語言區塊 d477f9ce7bf77f53fbcf36bec1b69b7a, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 和 c9ccee2e6ea535a969eb3f532ad9fe89。這三個部分分別代表了 html,js,css。

其中 d477f9ce7bf77f53fbcf36bec1b69b7a 和 c9ccee2e6ea535a969eb3f532ad9fe89 是支援用預編譯語言來寫的。例如，在我們的專案中，我們就用了scss 預先編譯，因此，我們是這樣寫的：

<style lang="scss">

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

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

*.vue 檔案程式碼解析

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

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

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

template 部分

以下，我不再稱呼它為 *.vue 檔案了。改成為 vue 組件。首先，一個 vue 組件，他的 template 則代表它的 html 結構，相信大家可以理解了。但要注意的是，我們不是說把程式碼包裹在 d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2 中就可以了，而是必須在裡面方置一個 html 標籤來包裹所有的程式碼。在本範例中，我們採用了 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤。

大家看到 2432be42592c7cf43d7b271eae4dbb5a31a13137de512d4e98c7af37c2f9fe88 這個程式碼的時候一定很奇怪，這是個什麼玩意兒。其實，這是一個自訂元件。我們在其他地方寫好了一個元件，然後就可以用這種方式引入。同樣 479c53d55bf259afb26198039255ccd72fd8772b288aec020c7313ab369d9e3e 也是組件。

script 部分

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

import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;

其次，除了引用的文件，我們將所有的程式碼包裹在如下的程式碼中間：

export default {
  // 这里写你的代码，外面要包起来。
}

我們先引入了Header 和Footer 這兩個元件的來源文件，接下來，我們要把引用的元件給申明到components 裡面去。這樣，我們就可以在 template 裡面使用了。

components: { Header, Footer },

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

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

created 表示當我們的元件載入完成時，需要執行的內容。例如這裡，我們就讓元件在載入完成時，執行一個叫 this.getData() 的函數。另外created是vuejs中的勾子函數之一。（具體的勾子函數請參考附錄）

created () {
  this.getData()
},

#methods是我們的這個元件的方法，也可以說是函數。例如，上面的程式碼就表示，我們的元件自訂了一個叫 getData() 的方法函數。

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

style 部分

这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：

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

到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。

附录

勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！

初識 Vue.js 中的 *.Vue檔_vue.js

相關文章