六、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的生命周期,而函数则是生命周期内各个阶段的事件方法。如下图

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ会员技术团队的专栏

HTTP/2 探索第一篇:概念

现在网络优化的瓶颈是什么?你可能会说,带宽。也许在2014年前,决定性能的关键是带宽,但是在今天以及以后,瓶颈都不会是带宽,而是延迟。

2.6K10
来自专栏陈纬杰的专栏

vue.js 初体验:Chrome 插件开发实录

通过一个Chrome插件的开发,来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中,开发一些小工具可以大大的提高我们的工...

4.5K20
来自专栏王鹤的专栏

Vue.js前后端同构方案之准备篇:代码优化

目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技...

4.1K20
来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

6.1K00
来自专栏屈政斌的专栏

【腾讯云的1001种玩法】centos 7 部署 dotnetcore + Angular2 实践

本文主要讲述了使用腾讯云主机,在centos 7 部署 dotnetcore + Angular2 的实践过程,该项目目前只是用于学习 dotnetcore ...

2.8K10
来自专栏社区的朋友们

深入 Vue2.x 的虚拟 DOM diff 原理

vdom 因为是纯粹的 JS 对象,所以操作它会很高效,但是 vdom 的变更最终会转换成 DOM 操作,为了实现高效的 DOM 操作,一套高效的虚拟 DOM ...

4.3K60
来自专栏李萌的专栏

Vue.js动画在项目使用的两个示例

vue.js在2016年大放异彩,我们 Qlippie 直播平台进来使用vue.js开发了一些页面,效果拔群,在这里跟大家分享在项目中用vue.js开发的两个动...

7.1K40
来自专栏云加头条

腾讯工程师们怎么玩 Vue.js?

Vue.js 是国人尤雨溪开发的一套前端框架。从去年开始,就火遍了国内外。本文精选了腾云阁中分享的相关优质技术文章,从入门、实战、源码、优化等多个方面进行了阐述...

6.8K30
来自专栏谢易成的专栏

Webpack + vue 之抽离 CSS 的正确姿势

大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。

5.3K30
来自专栏纪俊的专栏

Reactjs vs. Vuejs

对于近期关注度最高的 React 和 Vue,想在这里谈谈两个框架在开发风格上的差异。Vue 升级到 2.0 之后新增了很多 React 原有的特性,我的理解是...

4.1K00

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励