从vue项目的目录结构介绍中,我们了解到src目录是项目的核心文件目录,是我们开发vue项目所必须掌握的。所以,在后面的章节中,我们都是针对src目录来做介绍,如:组件、路由、数据绑定、请求数据、数据存储等等。本章,我们对App.vue根组件做一个简单介绍。
一般情况下,一个组件文件由3部分组成:template模板代码、script代码、style代码。App.vue代码如下:
<template>
<div>
<router-view></router-view>
</div></template>
<script>
export default {
data(){ return{ } }
}
</script>
<style >
</style>
一:template模板部分:
1、模板标签template内部只能有一个子标签(父节点),如上面代码中的<div>。如果有多个子标签,就会出错。
2、<router-view></router-view>是子路由视图,是一个路由标签。路由对应的页面内容会显示在这里。如:路由对应的是分类页,就显示分类页的内容;如对应的是文章页,就显示文章页的内容。这个在后面的路由章节中将会详细解说。
二:script代码部分:
因为vue项目通常是用ES6代码来写的,所以,vue组件的script部分,需要用export default来导出。script部分的代码可以包含:data()数据、生命周期(如:mounted加载完成后)、conponents(组件声明)、methods(自定义方法)等等,这些将在后面的章节中,我们会经常用到。
三:style代码部分:
style代码部分,顾名思义,就是CSS样式代码部分。这里,我们可以直接添加当前组件纯CSS样式代码,默认是影响全局的,所以,最好是给template模板父节点添加一个ID或CLASS属性,然后针对这个属性下的子孙元素添加CSS样式,这样就只是局部样式了。或者在style标签上加scoped,定义作用域只在该组件下起作用,<style scoped></style>
当然,这里也可以使用less、sass等CSS预处理语言,它们扩展了CSS,可以使用变量、函数等,使用CSS语言更加强大。不过,要想使用这些less或sass,需要安装 sass-loader依赖包,然后给<style>标签添加一个属性,如:<style lang="sass"></style>或<style lang="scss"></style>。sass与scss的区别:sass不能使用大括号和分号(使用缩进),而scss可以使用大括号和分号。
