[JavaScript知识库]vue-stydy part 2 #vue组件基础1

目录：

1. 单页面应用程序
2. vite 的基本使用
3. 组件化开发思想
4. vue 组件的构成
5. 组件的基本使用
6. 封装组件的案例

目标：

• 能够说出什么是单页面应用程序和组件化开发
• 能够说出 .vue 单文件组件的组成部分
• 能够知道如何注册 vue 的组件
• 能够知道如何声明组件的 props 属性
• 能够知道如何在组件中进行样式绑定

单页面应用程序

1.单页面应用程序的优点

1. 良好的交互体验
   • 单页面应用的内容的改变不需要重新加载整个页面
   • 获取数据也是通过 Ajax 异步获取
   • 没有页面之间的跳转，不会出现白屏现象
2. 良好的全后端工作分离模式
   • 后端专注于提供 api 接口，更容易实现 api 接口的复用
   • 前端专注于页面的渲染，更利于前端工程化的发展
3. 减轻服务器压力
   • 服务器之提供数据，不负责页面的合成与逻辑的处理

2.单页面缺点

1.首屏加载慢

• 路由懒加载
• 代码压缩
• cdn 加速
• 网络传输压缩 2.不利于 seo
• ssr 服务器端渲染

3.快速创建vue 的 spa 项目

1.基于 vite 创建 spa 项目

2.基于 vue-cli 创建 spa 项目

vite 的基本使用

1.创建 vite 的项目

  npm init vite-app 项目名称

  cd 项目名称

  npm install
  npm run dev

2.vite 项目结构

3.vite项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中

1. App.vue 用来编写待渲染的模板结构

组件化开发思想

根据封装的思想，把页面上可重用的部分封装成为组件，从而方便项目的开发和维护。

1. 组件化开发的好处
   • 提高了前端代码的复用性和灵活性
   • 提升了开发效率和后期的可维护性
2. vue中的组件化开发
   • vue是一个完全支持组件化开发的框架，vue中规定组件的后缀名是.vue

vue 组件的构成

1. template 节点 vue3.0 可使用多个根节点
2. script 节点 ： 今后 组件相关的 data 数据、methods 方法等都需要定义到 export default 所导出的对象中
3. props组件
   父传子
   其中，每个组件中必须包含template模板结构，而script和style是可选的组成部分

组件的基本使用

1. 组件的注册
   组件之间可以进行相互引用
   vue中组件的引用原则：先注册后使用
   • 注册组件有两种方式
   1. 全局中注册组件 ：在main.js中引用注册
   2. 局部注册组件 ： 在组件内部script节点中引用注册
   3. 两者都用component方法注册
2. style节点的scoped属性
3. /deep/样式穿透
4. 组件的props
5. class与style绑定
6. 动态绑定heml的class
7. 以数组语法绑定html的class
8. 以对象语法绑定html的class
9. 以对象语法绑定内联的style