Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

前情回顾

在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 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 基础文件,并且做到了项目的样式代码的可管控。

一个常见的 *.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 },

如上,我们先引入了 HeaderFooter 这两个组件的源文件,这里,我们要把引用的组件给申明到 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 的官方文档,那里有更加全面的介绍。

参考资料:《vue 模板语法

作为初学者,先掌握这么多的内容就可以了。

style 部分

这里比较简单,就是针对我们的 template 里内容出现的 html 元素写一些样式。如上,我的代码:

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

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

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

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

NodeJS那些事

下半年做了挺多活动型需求,因为我们业务人力有限,我在业务的策略是不依赖NodeJS。

19000
来自专栏编程

某音乐类App评论相关API的分析及SQL注入尝试

*本文作者:molibird,本文属 FreeBuf 原创奖励计划,未经许可禁止转载。 关键字:APIfen、工具使用、sql注入 涉及工具/包:Fiddler...

21700
来自专栏社区的朋友们

爬虫实战 : 爬虫之 web 自动化终极杀手(下)

最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路。本次爬虫内容有:静态页面的爬取。动态页面的爬取。web 自动化终极爬虫...

1.8K10
来自专栏向治洪

React Native运行原理解析

Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (reac...

1K80
来自专栏非著名程序员

Android Studio详细安装流程和配置、主题

? 原文作者:欧神. 杨 / OCN Yang 原文地址:http://ocnyang.com/2016/09/13/AndroidStudioSet/ 特别...

27460
来自专栏Android自学

Android Studio advanced configuration

14120
来自专栏知晓程序

开发者自述:我如何用云函数快速搞定「模板消息推送功能」

19720
来自专栏技术栈大杂烩

Python: mutilprocessing Processing 父子进程共享文件对象问题

multiprocessing python多进程模块, 于是, Processing也是多进程的宠儿. 但今天讨论的问题, 似乎也能引起我们一番重视

17760
来自专栏FreeBuf

JIS-CTF靶机+Kioptrix靶机渗透

最近一直在down各种CTF靶机玩,本次分享的2个靶机因较基础,故合并成一篇文章发表,本文章仅为初学者练手学习使用,大神们勿喷,感谢各位大佬!

16740
来自专栏狮乐园

高级 Angular 组件模式 (3a)

针对第一个问题,我们使用@ContentChildren装饰器(因为它获取所有的子组件引用),但是它无法解决第二个问题。

10540

扫码关注云+社区

领取腾讯云代金券