写给女朋友的vue教程(三)

前言

​ 5月18日带着女朋友去参加我哥的婚礼,也把我谈了5年的女朋友第一次带到我爸妈面前,颇为羞愧。看的出来,爸妈很喜欢她,她也给我爸妈准了些许小礼物,晚上带着我妈一起去吃了宵夜,能看出来我妈很拘谨。女朋友也收敛很多,我心里最重要的两个人第一次成功在孝感会晤,我作为举办方,表示很欣慰。参加这次婚礼感受良多。今年为了给女朋友一份安定,举全家之力,在盘龙城买了一套两居室的窝,为了不让她远嫁,所以选址在离她家8公里的一个小区(买不起她家旁边的),房子解决了,安身立命之所有了,在就应该想着怎么娶她到家了。参加了这次婚礼,对以后的目标也越来越清晰,希望以后也能给她一个像样的婚礼,风光的娶她进门。加油吧!

开始正题

​ 上个星期看了一下公司的前端项目,发现我还是太LOWB了,隔行如隔山,如今的前端远不是我在学校学的那些前端知识了,所以这篇文章不能以偏概全的去讲所有了,那么今天我先看看单文件组件以及Vue Loader的概念,不涉及到底层原理

单文件组件

​ 先来说一下什么是组件吧,组件我理解的应该是一个界面上面的一个可以即插即用的一个模版,比如搜索,按钮,表格,分页等类似控件,根据项目整体风格,提供了统一化的样式,以及功能

​ 这里我就不说官网上面集成到每个页面里面的组件了,这样不够灵活,应该整个项目的组件一个统一管理,统一调用,降低耦合,使其具有更高的可维护性

​ Vue单文件组件是一以.vue后缀结尾的文件,可以吧html,css,js写到一个文件中,实现对组件的一个封装

​ 一般我们用vue-cli构建的项目自带一个components文件夹,可以将项目中频繁使用到的组件进行封装到单个vue文件里面,在项目中重复使用

​ 一般在项目中会将组件封装成一个单独的文件,然后在需要的页面去import就好了,在使用的时候,需要在components属性中注册

1
2
3
4
5
6
7
8
9
10
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
components: {
ComponentA,
ComponentC
},
// ...
}

Vue-Loader

​ Vue-loader是一个webpack的load,可以将vue文件转换为js模块

​ 因为.vue是一个自定义的文件类型,用类html语法来写一个Vue组件,每个Vue文件包含三种类型的语言

1
2
3
4
5
6
7
8
9
10
11
12
<template>
//html
</template>
<style>
//css
</style>
<script>
//js
</script>
<style>
//css
</style>

即模版,脚本,样式。

​ Vue-Loader会去提取这些内容,然后组成js文件

这个是Vue-Loader的文档

[]: https://vue-loader.vuejs.org/zh/

总结

​ 其实这篇文章很水,关于Vue的东西这段时间不打算在写了,前端的东西涉及太广泛,我说出来的只是皮毛,以免误人子弟,前两篇文章只是基础中的基础,我根据公司的前端项目慢慢研究得来。如有错误,请指正!

-------------本文结束感谢您的阅读-------------
0%