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>运行结果：
点击前
点击后
使用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>点击前
点击后
注意：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中更改了按钮内容"; }); },
二、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> -
备注： 若有多个元素需要过度，则需要使用：
<transition-group>，且每个元素都要指定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>
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>
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>
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>
运行结果：
动画运行结果
三、vue脚手架配置代理
应用场景
前端vue地址：
http://localhost:8080
后端数据请求地址：
http://localhost:5000/api/employee/getEmployeeList
ajax跨域解决方法：
代理服务器图示：
方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 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': ''}
}
}
}
}
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
2、以上述代码中的请求为例，进行说明：
1）原请求地址：
/api/employee/getEmployeeList
2）node服务器遇到 以’/api’开头 的请求，将 target 字段加上，请求地址变为：
http://localhost:5000/api/employee/getEmployeeList
3）配置pathRewrite
（1）将开头的/api替换为空
pathRewrite:{
'^/api' : ''
}
（2）替换后，最后的请求地址如下。可用于最后请求没有/api 的情况
http://localhost:5000/employee/getEmployeeList
5）重启vue项目
npm run dev 或 npm run serve
1. 优点： 可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点： 配置略微繁琐，请求资源时必须加前缀。
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
