Vue.js是什么？

Vue.js是一个用于构建用户界面的渐进式框架，采用自下而上的增量开发设计。(自下而上的设计方法是根据系统的功能需求，从具体的器件、逻辑元件或类似系统入手，依靠设计人员的熟练技能和丰富经验，对其进行连接、修改和扩展，形成所需的系统。Vue的核心库只关注视图层，不仅易用，而且容易与第三方库或现有项目集成。另一方面，当与Vue生态系统支持的单文件组件和库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。

什么是a *。vue文件

首先我们用vue-cli脚手架搭建了这个项目，在这个项目中我们遇到了很多文件，比如index.vue或者App.vue这是什么鬼东西？如果你是vue开发的新手，你可能以前没有见过。*.Vue文件是一种自定义的文件类型，它用类似于HTML的语法描述一个vue组件。每一个。vue文件包含三种顶级语言块：模板、脚本和样式。这三个部分分别代表html、js、css和CSS。

模板和样式支持用预编译语言编写。例如，在我们的项目中，我们使用了SCS预编译，因此我们写道：

Style lang='scss'html也有自己的预编译语言，也支持vue，但一般来说，我们的前端人员更喜欢html的原生语言，我就不细说了。

另外，我用了一句话@import。App.vue文件中的“/style/style”；把我们的风格写在指定的地方。因此，这部分不会出现在我以后的所有文章中。所有样式都将写在src/style/文件夹的相应位置。我这样做的好处是不需要反复介绍各种scss基础文件，项目的风格代码可以控制。

*的代码分析。vue文件

首先，让我们简单了解一下：

模板标题/页眉分类='文章列表' ul li/li /ul /div页脚/页脚/div/模板脚本导入页眉自'./components/header.vue“从导入页脚”./components/Footer . vue ' export default { components 3360 { 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文件。让我们一部分一部分地解释一下。

模板部分

以下，我不再称之为*。vue文件。已更改为vue组件。首先是一个vue组件，它的模板代表了它的html结构，相信大家都能理解。但是，需要注意的是，我们并不是要把代码包装在template/template中，而是必须在里面放一个html标签来包装所有的代码。在这个例子中，我们使用div/div标签。

大家看到表头/表头代码一定很奇怪。这到底是什么？实际上，这是一个自定义组件。我们已经在其他地方编写了一个组件，然后我们可以用这种方式引入它。页脚/页脚也是一个组件。

脚本部分

首先，我们需要两个定制组件，我们将首先引用它们。下面的格式很容易理解。

从导入标题./components/header.vue“从导入页脚”.第二，除了引用的文件，我们把所有的代码包装在下面的代码中：

导出默认值{//在这里编写代码，并在外面包装。}我们首先介绍Header和Footer的源文件，然后将引用的组件声明为组件。这样，我们就可以在模板中使用它。

组件： {页眉、页脚}，数据就是我们的数据。我们的演示代码给出了空数组数据的列表。在模板中，我们可以使用这个. list来使用我们的数据。我们将在后面的文章中讨论这个问题。如果你不深入这里，就去了解它。

Data () {return {list: []}}，created表示加载组件时需要执行的操作。例如，在这里，我们让组件在加载时执行一个名为this.getData()的函数。此外，created是vuejs中的钩子函数之一。(具体挂钩功能请参考附录)

创建了(){this。getdata ()}，methods是我们组件的方法，也可以说是函数。例如，上面的代码表明我们的组件已经定义了一个名为getData()的方法函数。

Methods: {getdata () {this。$ api.get ('topics '，null，r={console。日志(r)})}}有关vue的更多语法解释，请参考https://cn.vuejs.org/v2/guide/syntax.html

样式部分

这里比较简单，就是为模板中出现的html元素编写一些样式。如下所示，我的代码：

style . article _ list { margin : auto；}/style在这里，我们应该对vue组件文件有一定的了解。在接下来的博文中，会有更多的写作方法，建议大家看完这篇文章后多花点时间查看vue的官方文档。虽然你可能无法理解所有的文档，但你应该有一个大致的了解，否则下面的学习会更难。

附录

Hook可以理解为vuejs的生命周期，而function是生命周期中每个阶段的事件方法。下图

摘要

以上是*。Vue.js中的Vue文件是边肖介绍给大家的。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！