6、VueJs 填坑日記之初識*.Vue文件

上一篇博文中，咱們將接口的地址經過webpack代理到了本地，解決了跨域的問題。在以前的文章中，咱們一直對項目進行配置，並無真正的切入正題，可能不少人還不明白咱們要作什麼？那麼今天，咱們就要開寫代碼了。忠心感謝FungLeo，是大家無私的奉獻，才讓咱們有了學習的參考，如下是地址：
本文轉載：http://blog.csdn.net/fungleo/article/details/77575077

什麼是*.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 基礎文件，而且作到了項目的樣式代碼的可管控。

 

*.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>標籤。

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

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

created 表示當咱們的組件加載完成時，須要執行的內容。好比這裏，咱們就讓組件在加載完成時，執行一個叫 this.getData() 的函數。另外created是vuejs中的勾子函數之一。（具體的勾子函數請參考附錄）

created () {
    this.getData()
},

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

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

更多關於vue的語法解釋請參見：https://cn.vuejs.org/v2/guide/syntax.html

 

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

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

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

附錄
勾子，能夠理解爲vuejs的生命週期，而函數則是生命週期內各個階段的事件方法。以下圖