初识 Vue.js 中的 *.Vue文件(2)

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>