vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和vue生态系统支持的库结合使用时，vue 也完全能够为复杂的单页应用程序提供驱动。
什么是*.vue文件
首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 ,
其中 和
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
以上就是一个简单的 *.vue 文件的基本结构。我们一部分一部分的来解释。
template 部分
以下，我不再称呼它为 *.vue 文件了。改成为 vue 组件。首先，一个 vue 组件，他的 template 则代表它的 html 结构，相信大家可以理解了。但是需要注意的是，我们不是说把代码包裹在 中就可以了，而是必须在里面方置一个 html 标签来包裹所有的代码。 本例子中，我们采用了
立即学习“前端免费学习笔记（深入）”；
标签。大家看到
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)
})
}
}
立即学习“前端免费学习笔记（深入）”；
style 部分
这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。
附录
勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图
相关推荐：
