vue3的系统知识学习

最新推荐文章于 2024-05-31 09:42:54 发布

樂笒

最新推荐文章于 2024-05-31 09:42:54 发布

阅读量360

点赞数

分类专栏： vue 文章标签：学习前端 vue.js

本文链接：https://blog.csdn.net/m0_49413017/article/details/124626240

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

目录
1. webpack 的学习目标
2. 什么是前端工程化
3 webpack的基本使用
4.vue目录
- 4.1 vue的特性
5 单页面应用程序
6. 组件化开发思想
7.0 计算属性
8.0 自定义事件

1. webpack 的学习目标

理解什么是前端工程化
- 转变对前端开发的认知
了解webpack的基本用法
1. 为后面Vue和React课程的学习做技术储备
不强制要求大家能手动配置webpack
- 一定要知道webpack在项目中有什么作用
- 清楚 webpack 中的核心概念
能够掌握webpack的基本使用
- 安装、webpack.config.js、修改打包入口
了解常用的plugin的基本使用
- webpack-dev-server.html-webpack-plugin
了解常用的loader的基本使用
- loader的作用、loader的调用过程
能够说出Source Map的作用
- 精准定位到错误行并显示对应的源码方便开发者调试源码中的错误

实际的前端开发:

模块化(js 的模块化、cSs的模块化、资源的模块化)
组件化（复用现有的U结构、样式、行为)
规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
自动化（自动化构建、自动部署、自动化测试)

2. 什么是前端工程化

前端工程化指的是:在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、
标准化。

企业中的Vue项目和React项目，都是基于工程化的方式进行开发的。

好处:前端开发自成体系，有一套标准的开发方案和流程。

3 webpack的基本使用

3.1 什么是webpack

概念: webpack是前端项目工程化的具体解决方案。

主要功能:它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处:让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意:目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的

开发上线的包加-S

只在开发用的包加-D

3.2 webpack的安装使用

npm install webpack@5.42.1 webpack-cli@4.7.2 -D //安装webpack的代码

配置：

在项目根目录中，创建名为webpack.config.js 的webpack配置文件，并初始化如下的基本配置:

开发时：development
上线时：production

module.exports={
    mode:'development'
}

在package.json的 scripts节点下，新增dev脚本如下:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },

在终端中运行npm run dev命令，启动webpack进行项目的打包构建

npm run dev

3.3 webpack中的插件

webpack-dev-server

html-webpack-plugin

3.4 webpack中的loader

loader概述

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，
webpack 默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!

loader加载器的作用:协助webpack打包处理特定的文件模块。比如:

css-loader 可以打包处理.cSs相关的文件

less-loader可以打包处理.less相关的文件

babel-loader可以打包处理webpack无法处理的高级JS语法

base64图片减少发起的网络请求,体积变大

4.vue目录

vue简介
vue的基本使用
vue的调试工具
vue的指令与过滤器
品牌列表案例
能够知道vue的基本使用步骤
掌握插值表达式和v-bind指令的用法
能够掌握如何使用v-on指令绑定事件
能够使用v-model指令实现数据的双向绑定
能够使用v-if 和v-else指令实现条件渲染
能够使用v-for指令实现列表数据的循环渲染

用vue的好处

基于wue中捉供的指令，可以方便快捷的渲染页面的结构，数据驱动视图〔只要页面依赖的数据源变化，则页面自动重新渲染)

总结什么是vue

一套用于构建用户界面的前端框架

4.1 vue的特性

数据驱动视图
双向数据绑定

5 单页面应用程序

5.1 什么是单页面应用程序

单页面应用程序（英文名: Single Page Application)简称SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

5.11单页面应用程序的优点

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

5.12单页面应用程序的缺点

首屏加载慢
- 路由懒加载
- 代码压缩
- CDN加速网络
- 传输压缩
不利于SEO
- SSR服务器端渲染

5.3 vue项目的运行流程

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

5.4 如何快速创建vue的spa项目

vite
vue-cli

5.41 vite创建

npm init vite-app xxx

5.42 vite项目的运行流程

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

1．从 vue中按需导入createApp函数，
createApp函数的作用:创建vue的“单页面应用程序实例”
2. 导入app组件
3. 调用createapp函数接受实例
4. mount挂载

6. 组件化开发思想

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

6.0 什么是组件化开发

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

6.1 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面:

提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性

6.2 注意的点

起名首字母大写

6.1 组件之间的父子关系

组件封装好后，彼此之间是相互独立的，不存在父子关系

在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系

6.3 配置less语法

安装

npm install lees -D

标签上添加

<style lang="less" scoped>
  h1 {
    color: pink;
    i{
      color: greenyellow;
    }
  }
</style>

6.4 使用组件的三个步骤

引用

全局注册

调用方法app.component（‘组件名’，组件）

局部注册

  components:{
    'Hi':Hi
  }

注册时，可以写xxx.name 当名字

写标签

6.5 组件注册名字的问题

短横线命名法 xxx-xxx
驼峰法 MyAxx

6.3 组件的props

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性!它的语法格式如下:

props:['xxx' ]

vue规定:组件中封装的自定义属性是只读的，程序员不能直接修改props的值。

要想修改props 的值，可以把props的值转存到data中，因为data中的数据都是可读可写的!

6.31 props的默认值

props：{
    xxx：{
        default：0
    }
}

6.32 props的type值

在声明自定义属性时，可以通过type来定义属性值的类型

6.4 组件的样式冲突问题

加一个 scoped 就行

<style lang="less" scoped>
  h1 {
    color: pink;
    i{
      color: greenyellow;
    }
  }
</style>

6.5 如何修改子组件的样式

使用样式穿透

:deep(xxx) {
    
}

6.6 封装组件

6.7 总结

能够说出什么是单页面应用程序及组件化
- spa，只有一个页面，组件是对UI结构的复用
能够说出vue单文件组件的组成部分
能够知道如何注册vue组件
- 全局注册（app。component），局部注册（components）
能够知道如何声明组件的props属性
- porps数组
能够知道如何在组件中进行样式绑定
- 动态绑定class，动态绑定style

6.8 props验证

使用对象类型的props

7.0 计算属性

7.1 什么是计算属性

计算属性本质上就是一个function函数，它可以实时监听data中数据的变化，并return一个计算后的新值，供组件渲染DOM时使用。

7.2 如何声明计算属性

计算属性需要以function函数的形式声明到组件的computed选项中。

注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有return返回值@！

7.3 计算属性的使用注意点

① 计算属性必须定义在computed节点中

② 计算属性必须是一个function函数

③ 计算属性必须当做普通属性使用

④ 计算属性必须有返回值

7.4 计算属性的优点

他会缓存计算的结果，只有计算的属性改变以后才会重新计算，性能更好

8.0 自定义事件

8.1 什么是自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

8.2 声明自定义事件

在emits节点中声明

触发事件

this.$emit('change')

8.3 组件上的v-model

可以维护组件内外数据的同步

父传子步骤:

通过v-bind绑定，把数据传给子组件
子组件接受

子传父步骤：

指令前添加v-model
emits自定义事件派发emits:[‘update:number’],
this.$emit(‘update:number’,this.number+1)

8.4 小结

能够知道如何对props进行验证
- 数组格式、对象格式
- type、default、required、validator
能够知道如何使用计算属性
- computed节点、必须return一个结果、缓存计算结果
能够知道如何为组件绑定自定义事件
- v-on绑定自定义事件、emits、$emit()
能够知道如何在组件上使用v-model
- 组件内外数据同步

9.1 目标&目录

目标

能够掌握watch侦听器的基本使用
能够知道vue中常用的生命周期函数
能够知道如何实现组件之间的数据共享
能够知道如何在vue3.x的项目中全局配置axios

目录

watch 侦听器
组件的生命周期
组件之间的数据共享
vue 3.x中全局配置axios
购物车案例

9.2 watch侦听器

9.21 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

例如，监视用户名的变化并发起请求，判断用户名是否可用。

9.22 watch侦听器的基本语法

开发者需要在watch节点下，定义自己的侦听器。实例代码如下:

樂笒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3的系统知识学习

文章目录目录1. webpack 的学习目标2. 什么是前端工程化3 webpack的基本使用3.1 什么是webpack3.2 webpack的安装使用3.3 webpack中的插件3.4 webpack中的loader4.vue目录4.1 vue的特性5 单页面应用程序5.1 什么是单页面应用程序5.11单页面应用程序的优点5.12单页面应用程序的缺点5.3 vue项目的运行流程5.4 如何快速创建vue的spa项目5.41 vite创建5.42 vite项目的运行流程6. 组件化开发思想6.0 什么是
复制链接

扫一扫