vue3.0

---

前言

一个小白的学习历程，用自己的的亲身经历为各位还未步入职场的朋友们先探探路。qvq

---

vue3.0

提示：这是vue3.0篇

一、概述

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。

框架：就是一套完整的项目解决方案，用于快速构建项目 。

优点：大大提升前端项目的开发效率 。

缺点：需要理解记忆框架的使用规则 。

二、Vue常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

常用指令：

2.1v-for

作用：列表渲染，遍历容器的元素或者对象的属性。

语法： v-for = “(item,index) in items”

参数说明：

items 为遍历的数组

item 为遍历出来的元素

index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = “item in items”

2.2v-for的key

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用。

语法： v-for = “(item,index) in items” :key=“唯一值”

注意点:

key的值只能是字符串 或 数字类型

key的值必须具有唯一性

推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

官方推荐在使用 v-for 时提供一个key属性，以遍可以追踪每个节点，提升渲染性能。

2.3v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名=“属性值”

简化：:属性名=“属性值”

注意：v-bind所绑定的数据，必须在data中定义 。

2.4v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的。

v-if

语法：v-if=“表达式”，表达式值为 true，显示；false，隐藏。

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

场景：要么显示，要么不显示，不频繁切换的场景。

其它：可以配合 v-else-if / v-else 进行链式调用条件判断。

v-show

语法：v-show=“表达式”，表达式值为 true，显示；false，隐藏。

原理：基于CSS样式display来控制显示与隐藏。

场景：频繁切换显示隐藏的场景。

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后 。

2.5 v-model

作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据 。

语法：v-model=“变量名”

注意：v-model 中绑定的变量，必须在data中定义。

2.6v-on

作用：为html标签绑定事件（添加事件监听）

语法：

v-on:事件名=“内联语句”

v-on:事件名="函数名“

简写为 @事件名=“…”

三、Ajax

3.1概述

介绍：Asynchronous JavaScript And XML， 的JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

XML：（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

3.2异步与同步

3.3原生Ajax

创建XMLHttpRequest对象：用于和服务器交换数据

向服务器发送请求

获取服务器响应数据

3.4Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

3.4.1Axios使用步骤

引入Axios的js文件。

使用Axios发送请求，并获取相应结果。

method：请求方式，GET/POST

url：请求路径

data：请求数据

在使用axios时，在axios之后，输入 thenc 会自动生成成功及失败回调函数结构 。

3.4.2Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名。

格式：axios.请求方式(url [, data [, config]])

3.5Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

3.6回调函数地狱

这种情况发生在需要执行一系列的异步操作，而每个操作都依赖于前一个操作的返回结果。 导致代码嵌套过深、可读性差、不便于维护。

async & await：

可以通过async、await来解决回调函数地狱问题。async就是来声明一个异步方法，await是用来等待异步任务执行。

注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值 。

四、Vue工程化

4.1介绍

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点：

1. 模块化：将js和css等，做成一个个可复用模块。
2. 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理。
3. 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范。
4. 自动化：项目的构建，测试，部署全部都是自动完成。

所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技
术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要
学习vue的官方提供的脚手架帮我们完成前端的工程化。

4.2Vue项目-创建

创建一个工程化的Vue项目，执行命令： npm init vue@3.3.4

提示：执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

项目创建完成以后，进入vue-project1项目目录，执行命令安装当前项目的依赖： npm
install

Vue项目-目录结构

启动项目，执行命令： npm run dev

4.3Vue项目开发流程

其中 *.vue 是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File
Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（ *.vue ）