Vue3.0一文搞定

vue框架安装

https://blog.csdn.net/qq_42006801/article/details/124830995?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170104801916800222815236%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170104801916800222815236&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-124830995-null-null.142^v96^pc_search_result_base4&utm_term=node&spm=1018.2226.3001.4187)

下载vue

npm install -g @vue/cli

assert 存放静态资源

components存放公共组件

App.vue 根组件，所有的组件都是通过这个引入的

main.js主入口文件相当于java中的main

registerServiceWorker.js 监听文件做到哪一步有提示

1.查看npm默认存放位置 npm get prefix

2.使用npm get cache查看npm缓存默认存放路径

创建Vue

打开Vue

运行Vue

文本

文本动态化

数据绑定最常见的形式就是使用Mustache（双大括号）语法的文本插值

<span>Message:{{msg}}<span>

一般配合js中的data()设置数据

原始HTML

识别文本标签

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令

用来识别文本中的html标签。

属性Attribute

属性动态化可以简写为：

Mustache语法不能在html属性中使用，然而，可以使用v-bind指令

在标签属性前加入v-bind可以动态的改变标签属性

在动态文本中可以进行简单的运算

但只能运算单个表达式

条件渲染

v-if指令用于条件性渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染

v-else可以使用v-else指令来表示v-if的else块

需要配合data里面的变量

需要注意的是v-if和v-else需要紧挨着

另一个控制文本是否显示的是v-show指令

v-if和v-show的区别

v-if是真正的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当的被摧毁和重建。

v-if是堕性的：如果在初始渲染时条件为假，则什么也不做直到条件第一次为真时，才会开始渲染条件块

v-show不管初始条件是什么，元素总会被渲染，并且只是简单的基于CSS进行切换

一般来说V-if有更高的切换开销，而v-show有更高的初始渲染开销。如果需要非常频繁的切换则使用V-show较好，如果在运行时条件很少改变用V-if比较好。

列表渲染

用V-for把一个数组映射为一组元素

我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item initems形式的特殊语法，其中items是源数据组，而item则是被迭代的数组元素的别名。

item代表数组中的对象

newList代表数组

维护状态

当Vue正在更新使用V-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确报它们在每个索引位置正确渲染。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key attribute数组改变时加了这个标签就不需要重新渲染已经渲染过的数据

通过id来比对数据是否发生变化来决定是否进行重新渲染

这样能节省性能

事件处理

监听事件

我们可以使用v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时执行一些JavaScript。用法为v-on：click=“methodName”或使用快捷方式@click=“methodName"

事件处理方法

然而许多事件处理的逻辑会更加复杂，所以直接把javaScript代码写在v-on指令中是不可能的。因此v-on还可以接受一个调用的方法名称。

事件传递参数

就是写的事件是可以有数据传递的。

表单输入绑定

你可以使用v-model指令在表单<-input->,<-texttarea->,<-select->元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行特殊处理。

就是可以用v-model来监听用户输入数据的更新

就是用户向系统传递数据账号和密码等input的输入和p的显示可以同步

修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以添加lazy修饰符，从而转为在change事件之后进行同步

就是不会立即同步而是在失去焦点或者回车后才改变。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符

就是干掉输入中的空格

组件基础

单文件组件

Vue单文件组件有名（*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板，逻辑与样式封装在单个文件中

html模板 js逻辑 CSS风格 三合一组成Vue组件

相当于Java中的一个模块

Vue单文件组件后缀名是.vue结束，是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装到单个文件中

这一个文件就能组成一个完整的组件这就是单文件组件

加载组件

第一步引入组件

import MyComponentVue from './components/Mycomponent.vue'

第二步挂载组件

components:{MyComponentVue}

第三步显示组件

<my-componentVue/>

App.vue是最外层的组件可以理解为根组件，所有的组件都是基于它一层层加载的。

style中的scoped属性

如果在style中添加此属性，就代表着 ,当前样式，只在当前组件中生效

只有这个组件的H3是红色

组件的组织

通常一个应用会以一棵树嵌套的组件树的形式来组织

Props组件交互

组件与组件之间是存在交互的，否则完全没关系，组件的意义就很小

Prop是你可以在组件上注册的一些自定义attribute

Prop是可以在组件之间传递数据的

发送数据

接收数据

对传递的数量和类型没有限制

可以传数组，可以传函数，

数组和对象必须使用函数进行返回

数据类型为数组或者对象的时候，默认值是需要返回工厂模式

工厂模式的意思就是使用函数进行返回

自定义事件组件交互

数据的反向传递

需要两个Vue组件的数据互通就需要反向传递数据来实现页面之间的交互。

prop可以将数据从父组件传递到子组件

反向数据传递可以利用自定义事件实现$emit

发送数据到父组件

接收子组件的数据

组件的生命周期

每个组件在被创建时都要经过一系列的初始化过程----例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数，

这给了用户在不同阶段添加自己的代码的机会。

这个就是生命周期的意义

有八个生命周期函数，生命周期函数不需要自己去调用。

为了方便建议，我们可以将他们分类：

创建时： beforeCreate、 created

渲染时： beforeMount、 mounted

更新时： beforeUpdate、 updated

卸载时： beforeUnmount、unmounted

（面试时可能会有）

beforeCreate：在组件创建之前

created：在组件创建之后，创建之后不会立即显示，而是在渲染的时候显示。

beforeMount：在渲染之前触发

mounted：在渲染之后触发

beforeUpdate：在更新时触发

updated：页面的数据已经更新完毕。

beforeUnmount：卸载之前触发

unmounted：卸载完毕时触发。

生命周期函数按照顺序执行

组件渲染完成后需要通过网络请求内容，就好比京东购物，需要从网络上获取购物信息。

每个生命周期函数都有其特殊的作用。

Vue引入第三方

引入别人已经写好的代码就是引入第三方。

常见的业务和项目都是可以通过引入第三方实现的不用自己去写。

一个优秀的框架，拥有很多的第三方。

以轮播图的第三方来举例

Swiper开源免费、强大的触摸滑动插件

Swiper是纯JavaScript打造的滑动特效插件，面相手机，平板电脑等移动终端

Swiper能实现触屏焦点图，触屏Tab切换、触屏轮播图等常用效果。

Swipper官方文档Swiper Vue.js Components

或者swiper.com.cn

安装swiper

在package.json中可以看到 swiper的版本，在开发时要保证小组成员的swiper版本的一致

安装指定版本

npm install --save swiper @8.1.6

网络请求

Axios是一个基于promise的网络请求库

Axios需要安装不是Vue自带的

安装

引入

1.组件中引用：import axios from “axios‘

2.全局引用：全局引用表示所有的组件只用引用一次，组件引用是每个组件都要单独引用。

网络请求基本示例

post请求方式

网络请求接收数据的方式是不是对象类型而是一个字符串类型

所以需要数据的转换将字符串转换成对象

安装转换格式的第三方

Post请求参数是需要额外处理的

1.安装依赖npm install --save querystring

2.转换参数格式从字符串转到对象 qs.stringify({})

快捷方案

全局引入

在main.js中引入axios就是全局引入

使用的时候用

this.$axios

Axios网络请求封装

在日常应用程序中Axios的使用率是非常高的因此需要封装

在src下创建utils文件夹

在utils文件夹中创建request.js文件

在request.js中引入axios和requirestring

在request.js中创建拦截器对象，用来实现我们在发送网络请求之前，和获取网络请求给我们返回的数据之前都可能需要把数据拦截一下做一些额外的处理。

使用拦截器方法来做一些数据的处理比如在拦截器中将

post的字符串转换为对象数据

获取数据相应的拦截器

该拦截器调用的处理错误方法

axios参考文档

https：//www.kancloud.cn/yunye/axios/234845

在src目录下创建一个api文件夹

该文件夹集中存放网络请求

在api文件夹中创建inedx.js和path.js

path.js

index.js

组件获取数据

网络请求的跨域解决

网络请求的跨域问题就是不是每一个网络请求的地址或者每个接口地址都一定能拿到数据

Js采取的是同源策略

同源策略是浏览器的一项安全策略，浏览器只允许Js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。

也就是说，当协议、域名、端口。任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢？

标准跨域错误

解决跨域问题又两种方案

1.后台解决：cors

2.前台解决：proxy

将这段代码放到config.js中

将target的url改变为跨域地址

Vue路由配置

Vue路由就是用来管理页面之间的关系，来管理页面之间的跳转。

在Vue中，我们可以通过vue-router路由管理页面之间的关系

Vue Router 是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。

路由的作用就是来管理页面之间的关系

页面之间的跳转

第一步：安装路由 npm install --save vue-router

Vue官方路由文档

https://router.vuejs.org/zh/introduction.html

第二步：在src下新建一个文件夹router，在router里面创建一个index.js文件就是路由的配置文件

页面的存放：在src下创建view文件夹，在view文件夹中创建vue组件也就是页面~~~~

通过路由来管理页面的跳转

路由跳转演示如下注意看注释

1.创建HomeView

2.创建AboutView

3.创建路由配置文件index.js

4.在main.js主入口文件中引入路由

5.在AppView中使用路由进行页面跳转

6.不同创建router的区别

路由传递参数

页面跳转过程中，是可以携带参数的，这也是很常见的业务

例如：在一个列表项，点击进入查看列表项的详细信息

演示

1.创建一个新的页面

2.在index.js中将新创建的页面配置到路由中

3.在App.vue中显示

在views下创建NewsDetails.vue并在index.js中配置相关路由

传递参数演示

1.在路由配置中指定参数key

/:name作为key

2.在跳转过程中携带参数

在to中加入/传递的参数的值

3.在详情页读取路由携带的参数

4.实现效果

传递参数没有数量限制，继续加/:就行

嵌套路由配置

就是父导航和子导航=====大导航下面有小导航

配置index.js

增加重定向配置

就是不点击子导航时默认显示的内容

三级导航继续往children里面加children

Vue状态管理（Vuex）

就是组件与组件之间的数据管理

就是用来解决数据从组件a--->b----->c-----d

直接简化为a--->c a---->d b---->d

也可以说是用内存共享来解决数据传递的问题

第一步：安装Vuex

npm install --save vuex

第二步：在src下创建store文件夹，里面创建index.js文件，这个index.js文件就是用来保存vuex的代码的。

第三步：需要在主文件中引入vuex，也就是在main.js当中引用

第四步：在组件中读取数据

任何组件都能够读取这个数据

通过$符号来读取

或者用导入的方式来读取，这种方式适用于，这个页面要多次访问这个数据

mapstate是vuex提供的快捷读取方式

Vuex官方文档

https://vuex.vuejs.org/zh/

Vue状态管理核心(Vuex)

Vuex的核心包括 State Getter Mutation Action

Getter

对Vuex中的数据进行过滤

通过自己定义getCounter方法来访问Vuex的数据

同样这个方法也有多次使用的导入方案

Mutation

更改Vuex的store中的状态（也就是数据）的唯一方法就是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们进行数据更改的的地方，并且它会接受state作为第一个参数

这个方法触发是需要调用的

在mutation中定义的方法可以对数据进行操作，可以传入多个参数来改变数据

触发操作

1.定义Button方法

2.绑定方法

在组件中的导入方法2

Action

Action类似于mutation，不同在于：

Action提交的是mutation而不是直接改变数据

Action可以包含任意异步操作

Action存在的意义就是有异步操作的时候才会有Action

以网咯改变数据来举例

定义按键方法

这个数据来源于网络

便捷导入方式

Vue3新特性

六大亮点

1.Performance：性能比Vue2.0更强

2.Tree shaking support ：可以将无用模块"剪辑"，仅打包需要的

3.Composition API ：组合API

4.Better Type support ：更优秀的Ts支持

5.Customer Renderer API ：暴露了自定义渲染API

6.Fragment，Tyleport,Suspense:"碎片"，Teleport即Protal传送门，“悬念”

ref或者reactive

之前我们是用data来向页面返回要输出的数据

现在我们可以在组合式API中也就是setup中来做这件事

用ref或者reative代替了data（）：

第一步：引入ref

第二步：定义并返回数据

methods中定义的方法写在setup()

之前是通过methods定义方法给页面使用如下

现在在setup（）中写就可以了，并用return返回方法给页面

setup()中使用props和context

现在接收数据

第一步：定义props，只用定义数据类型

第二步：在setup中定义一个msg来接收信息，然后return给当前页面

定义一个msg接收传回来的信息并返回给页面

setup中没有this关键字

使用当前实例对象使用context来调用

在setup中使生命周期函

比以前有优势，以前同一个生命周期函数只能存在一个，现在可以存在多个

可以区分不同的渲染功能避免所有渲染都在一个Mounted中不利于后期维护

组件之间的数据传递Provide/Inject

1.provied()和Inject()可以实现嵌套组件之前的数据传递

2.这两个函数只能在setup()函数中使用。

3.父级组件中使用provide()函数向下传递数据。

4.子级组件中使用inject()获取上层传递过来的数据。

5.不限层级

就是实现a--->b----->c简化为a-------->c，但是只能由父组件向子组件传递不能子传父。

可以用这个在两个组件分别用这两段代码，就可以跨组件传递数据。但必须是由上到下

Fragment

Vue3加载Element--plus

饿了么提供的一套UI组件库，面向设计师和开发者

官网

https://element.eleme.cn/#/zh-CN

引入Element--plus到项目当中

第一步：安装Element---plus

npm install element-plus --save

第二步：引用

1.全局引入

在main.js配置

2.在网站中找到需要的代码，将代码加入到组件中

2.按需引入

第一步：我们要在安装了npm install element-plus --save的基础上再安装

npm install -D unplugin-vue-components unplugin-auto-import

第二步：修改配置文件

第三步：直接在组件中使用

3.字体图标

这个单独拿出来讲是因为有特殊的地方

需要安装特殊的

第一步：安装icons字体图标

npm install @element-plus/icons-vue

第二步：全局注册

第三步：在main.js中引入

第四步：在组件中使用

恭喜您学习完了Vue3.0