Vue项目实战（七）初识 *.vue 文件

 

这一篇介绍什么是*.vue 文件，公众号已经准备了vue实战教程，若是您有须要，能够在公众号回复“vue”获取。

 

在上一篇博文《Vue项目实战（六）将接口用 webpack 代理到本地》中，咱们顺利的将接口代理到了本地。须要说明的是， cnodejs.org 的这套接口是没有跨域问题的，也就是说，原本咱们是不须要代理到本地的。可是咱们在实际的工做开发中，接口基本上是有跨域问题的，因此咱们须要利用代理的方式来解决问题。

 

在前面的数篇文章中，咱们作了不少的工做，又是干这个，又是干那个的，但一直没有切入到正题，那就是咱们要作的工做呢，咱们要开发的代码呢。这一篇博文开始，咱们要来开发代码了。

 

什么是 *.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 基础文件，而且作到了项目的样式代码的可管控。

我这样作的好处是，不须要重复的引入各类 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> 标签。

 

    我我的不喜欢注意，在 vue1.x 中，也是不须要这样的。可是不清楚出于什么缘由，vue2.x 开始，就必须这样去写。龟腚就是龟腚，咱们按照这样的标准去写就能够了。

 

你们看到 <Header></Header> 这个代码的时候确定很奇怪，这是个什么玩意儿。其实，这是一个自定义组件。咱们在其余地方写好了一个组件，而后就能够用这种方式引入进来。

 

一样 <Footer></Footer> 也是一个组件。再也不累述。

 

其余的内容，咱们就想这么写就怎么写了。和写咱们的 html 代码没有什么太大的区别。

 

script 部分

 

首先，咱们须要两个自定义组件，咱们先引用进来。以下格式，比较好理解吧。

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

 

其次，除了引用的文件，咱们将全部的代码包裹于以下的代码中间：

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

 

若是你基础比较好，应该知道为何，若是不知道，也不要紧，就这么写就能够了。

在这个外面也是能够写代码的。可是你先别管这个，学得深了，天然知道怎么作了。这里先按照标准的来，不要太节外生枝。

 

好，咱们再说说这里面的内容。

 

components: { Header, Footer },

如上，咱们先引入了 Header 和 Footer 这两个组件的源文件，这里，咱们要把引用的组件给申明到 components 里面去。这样，咱们就能够在 template 里面使用了。

 

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

这里，是咱们的数据。咱们的演示代码，给了一个 list 的空数组数据。在 template 中，咱们可使用 this.list 来使用咱们的数据。这个咱们后面的文章中会讲到，这里不去深刻，认识它就能够了。

 

created () {
    this.getData()
  }

这里，表示当咱们的组件加载完成时，须要执行的内容。好比这里，咱们就让组件在加载完成时，执行一个叫 this.getData() 的函数。

 

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

这里，是咱们的这个组件的方法，也能够说是函数。好比，上面的代码就表示，咱们的组件自定义了一个叫 getData() 的方法函数。

 

script 部分，还有其余的内容，好比 watch 之类的。目前，咱们还不须要深刻到那里。更多的内容，能够查看 vue 的官方文档，那里有更加全面的介绍。

参考资料：https://cn.vuejs.org/v2/guide/syntax.html

做为初学者，先掌握这么多的内容就能够了。

 

style 部分

 

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

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

就是给咱们的 .article_list 元素随便加了一个样式。

 

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