-
Vue使用脚手架（nextTick、Vue封装的过度与动画、vue脚手架配置代理）（九）
vue系列文章目录
第一章：Vue基础知识笔记（模板语法、数据绑定、事件处理、计算属性）（一）
第二章：Vue基础知识（计算属性、监视属性、computed和watch之间的区别、绑定样式）（二）
第三章：Vue基础知识（条件渲染、列表渲染、收集表单数据、过滤器）（三）
第四章：Vue基础知识（内置指令、自定义指令、Vue生命周期）（四）
第五章：Vue基础知识之组件机制（非单文件组件、单文件组件）（五）
第六章：Vue创建脚手架（六）
第七章：Vue使用脚手架（ref、props、mixin、插件、scoped）（七）
第八章：Vue组件通信（组件的自定义事件、全局事件总线、消息订阅与发布、插槽、props）（八）
第十章：Vuex（十）
第十一章：vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）（十一）
第十二章：vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
第十三章：Vue组件通信二&数据同步（v-model、属性修饰符.sync、 a t t r s 与 attrs与 attrs与listeners、refs. c h i l d r e n 与 r e f s . children与refs. children与refs.parent、provide与inject ）（十三）
一、nextTick
-
语法：
this.$nextTick(回调函数) -
作用：
在下次DOM更新, 循环结束之后,执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM。案例（代码片段）：
未使用this.$nextTick前<template> <div class="container"> <button id="firstBtn" @click="testClick()" ref="aa">{{ msg }}</button> </div> </template> <script> export default { name: "App", data() { return { msg: "初始值", }; }, methods: { testClick() { this.msg = "修改后的值"; console.log(this.$refs.aa.innerHTML);//初始值 }, }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
运行结果：
点击前
点击后
使用this.$nextTick后<template> <div class="container"> <button id="firstBtn" @click="testClick()" ref="aa">{{ msg }}</button> </div> </template> <script> export default { name: "App", data() { return { msg: "初始值", }; }, methods: { testClick() { this.msg = "修改后的值"; this.$nextTick(() => { console.log(this.$refs.aa.innerHTML);//修改后的值 }); }, }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
点击前
点击后
注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。 -
什么时候用： 当数据更新了，在dom中渲染后，自动执行该函数。
-
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，在created()钩子函数执行的时候DOM 并未进行任何渲染，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
created() { this.$nextTick(() => { this.$refs.aa.innerHTML = "created中更改了按钮内容"; }); },- 1
- 2
- 3
- 4
- 5
二、Vue封装的过度与动画
-
作用： 在插入、更新或移除 DOM元素时，在
合适的时候给元素添加样式类名。 -
图示：
-
写法（
v代表给transition的name值）：-
准备好样式：
§ 元素进入的样式：
1. v-enter：进入的起点
2. v-enter-active：进入过程中
3. v-enter-to：进入的终点
§ 元素离开的样式：
1. v-leave：离开的起点
2. v-leave-active：离开过程中
3. v-leave-to：离开的终点 -
使用包裹要过度的元素，并配置name属性：
<transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition>- 1
- 2
- 3
-
备注： 若有多个元素需要过度，则需要使用：
每个元素都要指定key值。
-
案例（代码片段）：
App.vue<template> <div> <Test /> <Test2 /> <Test3 /> </div> </template> <script> import Test from "./components/Test"; import Test2 from "./components/Test2"; import Test3 from "./components/Test3"; export default { name: "App", components: { Test, Test2, Test3 }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
Test.vue
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </div> </template> <script> export default { name: "Test", data() { return { isShow: true, }; }, }; </script> <style scoped> h1 { background-color: orange; } .hello-enter-active { animation: atguigu 0.5s linear; } .hello-leave-active { animation: atguigu 0.5s linear reverse; } @keyframes atguigu { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
Test2.vue
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">我不好！</h1> </transition-group> </div> </template> <script> export default { name: "Test", data() { return { isShow: true, }; }, }; </script> <style scoped> h1 { background-color: orange; } /* 进入的起点、离开的终点 */ .hello-enter, .hello-leave-to { transform: translateX(-100%); } .hello-enter-active, .hello-leave-active { transition: 0.5s linear; } /* 进入的终点、离开的起点 */ .hello-enter-to, .hello-leave { transform: translateX(0); } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
Test3.vue
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp" > <h1 v-show="!isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">尚硅谷！</h1> </transition-group> </div> </template> <script> //使用动画插件 import 'animate.css' export default { name:'Test', data() { return { isShow:true } }, } </script> <style scoped> h1{ background-color: orange; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
运行结果：
动画运行结果
三、vue脚手架配置代理
应用场景
前端vue地址：
http://localhost:8080后端数据请求地址：
http://localhost:5000/api/employee/getEmployeeListajax跨域解决方法：
代理服务器图示：
方法一
在vue.config.js中添加如下配置：
devServer:{ proxy:"http://localhost:5000" }- 1
- 2
- 3
这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求)
代理到 http://localhost:5000
说明：
1. 优点： 配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式： 若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二
1.编写vue.config.js配置具体代理规则：
module.exports = { devServer: { proxy: { '/api1': {// 匹配所有以 '/api1'开头的请求路径 target: 'http://localhost:5000', // 后台接口地址 ws: true, //如果要代理 websockets，配置这个参数 secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: {'^/api1': ''}//路径重写，匹配api开头的字符串，并把api替换为空字符串 }, '/api2': {// 匹配所有以 '/api2'开头的请求路径 target: 'http://localhost:5001', // 代理目标的基础路径 changeOrigin: true, pathRewrite: {'^/api2': ''} } } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true2、以上述代码中的请求为例，进行说明：
1）原请求地址：
/api/employee/getEmployeeList- 1
2）node服务器遇到 以’/api’开头 的请求，将 target 字段加上，请求地址变为：
http://localhost:5000/api/employee/getEmployeeList- 1
3）配置pathRewrite
（1）将开头的/api替换为空
pathRewrite:{ '^/api' : '' }- 1
- 2
- 3
（2）替换后，最后的请求地址如下。可用于最后请求没有/api 的情况
http://localhost:5000/employee/getEmployeeList- 1
5）重启vue项目
npm run dev 或 npm run serve- 1
1. 优点： 可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点： 配置略微繁琐，请求资源时必须加前缀。 -
-
相关阅读:
【解决方案】SkeyeVSS+ SkeyeARS“国土卫士”农田水利视频监管系统，实现国土资源监管智能化
vue3.0 ref的使用
企业网络安全：威胁检测和响应 （TDR）
rabbitmq 从入门到精通
Vue多级路由的实现
差分数组入门
如何用python给女神写一封照片情书？亲测表白率100%~
.NET下 支持大小写不敏感的JSON Schema验证方法
PyTorch深度学习实战——使用卷积神经网络执行图像分类
【软考 系统架构设计师】开发方法
- 原文地址：https://blog.csdn.net/qq_48617322/article/details/126590986
