Vue.js中*.Vue文件的作用是什么

本篇文章給大家分享的是有關(guān) Vue.js 中 *.Vue文件的作用是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括網(wǎng)站制作、成都網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。成都創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)公司核心團隊10多年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

什么是Vue.js？

vue.js是一套構(gòu)建用戶界面的漸進式框架，它采用自底向上增量開發(fā)的設(shè)計。（自底向上設(shè)計方法是根據(jù)系統(tǒng)功能要求，從具體的器件、邏輯部件或者相似系統(tǒng)開始，憑借設(shè)計者熟練的技巧和豐富的經(jīng)驗，通過對其進行相互連接、修改和擴大，構(gòu)成所要求的系統(tǒng)。）Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應(yīng)用程序提供驅(qū)動。

什么是*.vue文件

首先，我們用 vue-cli 腳手架搭建的項目，里面我們已經(jīng)遇到了很多，如 index.vue 或者 App.vue 這一的文件了。這到底是個什么東西？如果是初次接觸 vue 開發(fā)的同學，可能之前沒有見過這個東西。*.vue 文件，是一個自定義的文件類型，用類似HTML的語法描述一個Vue組件。每個.vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。這三個部分分別代表了 html,js,css。

其中 <template> 和 <style> 是支持用預編譯語言來寫的。比如，在我們的項目中，我們就用了 scss 預編譯，因此，我們是這樣寫的：

<style lang="scss">

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

另外，我在 App.vue 文件中，已經(jīng)用一句 @import "./style/style"; 將我們的樣式給寫到指定的地方去了。所以，在后面所有的我的文章中，是不會出現(xiàn)這個部分的內(nèi)容的。所有樣式，都會在 src/style/ 文件夾中對應(yīng)的位置去寫。我這樣做的好處是，不需要重復的引入各種 scss 基礎(chǔ)文件，并且做到了項目的樣式代碼的可管控。

*.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 文件的基本結(jié)構(gòu)。我們一部分一部分的來解釋。

template 部分

以下，我不再稱呼它為 *.vue 文件了。改成為 vue 組件。首先，一個 vue 組件，他的 template 則代表它的 html 結(jié)構(gòu)，相信大家可以理解了。但是需要注意的是，我們不是說把代碼包裹在 <template></template> 中就可以了，而是必須在里面方置一個 html 標簽來包裹所有的代碼。 本例子中，我們采用了 <div></div>標簽。

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

script 部分

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

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

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

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

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

components: { Header, Footer },

data是我們的數(shù)據(jù)。我們的演示代碼，給了一個 list 的空數(shù)組數(shù)據(jù)。在 template 中，我們可以使用 this.list 來使用我們的數(shù)據(jù)。這個我們后面的文章中會講到，這里不去深入，認識它就可以了。

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

created 表示當我們的組件加載完成時，需要執(zhí)行的內(nèi)容。比如這里，我們就讓組件在加載完成時，執(zhí)行一個叫 this.getData() 的函數(shù)。另外created是vuejs中的勾子函數(shù)之一。（具體的勾子函數(shù)請參考附錄）

created () {
  this.getData()
},

methods是我們的這個組件的方法，也可以說是函數(shù)。比如，上面的代碼就表示，我們的組件自定義了一個叫 getData() 的方法函數(shù)。

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

更多關(guān)于vue的語法解釋請參見：https://cn.vuejs.org/v2/guide/syntax.html

style 部分

這里比較簡單，就是針對我們的 template 里內(nèi)容出現(xiàn)的 html 元素寫一些樣式。如下，我的代碼：

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

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

附錄

勾子，可以理解為vuejs的生命周期，而函數(shù)則是生命周期內(nèi)各個階段的事件方法。如下圖

 

以上就是 Vue.js 中 *.Vue文件的作用是什么，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：Vue.js中*.Vue文件的作用是什么
文章分享：http://muchs.cn/article16/jsogdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、標簽優(yōu)化、外貿(mào)建站、小程序開發(fā)、Google、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)