上一篇博文中，我們將接口的地址通過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的生命周期，而函數則是生命周期內各個階段的事件方法。如下圖
