摘要
在本文中,我们将学习什么是SPA,以及Vue中组件的基本使用。
声明:为了文章的清爽性,在文章内部的代码演示中只会附上部分演示代码,main.js文件的代码通常不贴出,如果感兴趣可以前往代码仓库获取
作者:来自ArimaMisaki创作
说明:单页面应用程序(Single Page Application)简称SPA,即在Web网站中只有唯一的一个HTML页面,所有功能与交互都在一个页面内完成。
特点:所有功能局限于一个页面中,这就意味着如果想要做出切换页面的效果,就需要通过JS来动态变化HTML的内容,做出一种切换页面的假象。
优点:
缺点:
说明:Vue官方提供了两种快速创建工程化SPA项目的方式,即Vite
和Vue-cli
。
区别:
创建项目:
npm init vite-app
npm i
安装所有依赖包npm run dev
可执行脚本启动项目项目结构:
运行流程:通过main.js将App.vue渲染到index.html的指定区域中。
说明:按照运行流程,我们应该做如下的几件事
模板
结构,模板上采用html语法书写,用template标签括起//1 按需导入createApp函数
import { createApp } from "vue";
//2 导入组件
import App from './App.vue';
// 3 调用createApp函数,创建SPA应用实例
const app = createApp(App);
// 4 调用mount()把APP组件的模板结构渲染到指定的el区域中,这里我们渲染到index.html标签id为app的元素中
app.mount('#app');
说明:从宏观来看,我们可以把可复用的结构封装为组件,然后在index.html上进行多次使用。从而方便项目的开发和维护。
vue组件化:vue是一个完全支持组件化开发的框架,vue中规定组件的后缀名为.vue
。
vue组件结构:vue的组件可以由三个节点组成
template:在vue3.x版本中,可以在该模板定义多个根节点,但在vue2.x版本中,仅支持定义一个根节点。
script:可以在script中定义行为,并且通过ES6模块化暴露语法export default
来暴露模板中的内容,除此之外还可以定义一些属性来为组件提供功能性辅助。
style:可以编写组件的样式,其中可以通过添加标签属性lang来指定style采用什么语言编写样式,lang="css"则采用css方式,这也是默认方式,lang="less"则采用less方式。不过要使用less之前需要使用npm i less
来安装依赖包获得less语法的编译支持。
说明:组件中可以引入其他组件进行使用,这也就催生了两种组件的注册方式,即全局注册
和局部注册
。
全局注册的方法:使用app.component(‘使用的标签名’,组件)
局部注册的方法:在需要导入的模块下的script节点中导入组件,并声明components选项,该选项是一个对象,可以按照使用的标签名
形式填写。
提示:在官方文档中,我们把module.exports对象中的各个属性称为选项
。如components选项,data选项,name选项。
说明:在进行组件的注册时,定义组件注册名称的方式有两种
如果使用的标签名使用短横线命名法的方式,则在使用标签时只能严格按照自己命名的名称来使用,但如果使用的是帕斯卡命名法,则在后续的使用中都可以转换为短横线命名来表示。
说明:组件的注册也可以使用组件中暴露出的name属性
组件冲突原因:如果一个组件里面嵌套一个子组件,则在渲染样式时,有可能会影响子组件的样式。出现这种情况的根本原因是因为vue文件下的模板节点我们写的结构都是虚拟DOM,而所有的组件都是基于唯一的index.html页面来呈现的。
解决方法:为每个组件分配唯一的自定义属性,在编写组件样式时,在传统的选择器后跟一个中括号,里面放你分配的自定义属性名,这样就可以解决冲突了。
//自定义data-v-001属性
更好的方法:如果手动指定自定义样式,这样会很麻烦。为此,vue为style节点提供了scoped属性,让vue自动为各个组件分配随机的属性。
说明:如果给当前组件的style节点添加了scoped属性,则当前组件的样式对其子组件不再生效。如果想让某些样式对子组件生效,可以在选择器前添加:deep()
。
原理:当加上样式穿透后,scoped的效果由原先的选择器[自定义属性]
变为了[自定义属性] 选择器
。
引入:为了提高组件的复用性,我们在封装组件时要遵循的规则是
比较显著的一个例子是:我们封装轮播图组件,组件的外观和轮换时间我们希望都一样,但是轮播图里的图片我们可不希望一样。我们希望在调用组件时,轮播图的图片由我们自己提供。
说明:如果我们希望数据由组件使用者提供,那我们就要使用到props。props是组件的一个选项
,可以通过props暴露想要传递的数据。当我们在编写组件模板的时候,模板中需要数据的地方用插值表达式来声明,而后在module.exports对象中新增props,以数组形式编写插值表达式对应的位置数据。当我们需要使用模板时,在data中提前准备好数据,利用v-bind传到组件上即可。
提示:在组件的插值表达式中不允许声明未定义的props。如果传递了未声明的props属性,则这些属性会被忽略,无法被子组件使用。
命名问题:props数组中存放的数据命名也采用短横线和帕斯卡命名的方式,声明帕斯卡时也可以转换短横线。
标题:{{title}}
作者:{{author}}
发布时间:{{pubTime}}
这是App.vue根组件
说明:我们可以通过三元表达式,动态的为元素绑定class的类名。
绑定多个class:如果元素需要动态地绑定多个class类名,可以使用数组
的语法格式,不同的三元表达式之间采用逗号分隔。
简化:使用数组语法动态绑定class会导致模板结构臃肿的问题,此时可以使用对象语法进行简化。
以对象语法绑定内联style:使用:style可以在模板结构标签中添加内联样式,这种语法的本质是一个js。
MyStyle组件
人才
MyStyle组件
人才