3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）
Posted 〔晴【天】º〕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）相关的知识，希望对你有一定的参考价值。
文章目录
axios 的使用
Axios 是一个基于 promise 网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端(浏览端)则使用XMLHttpRequests。
1、axios 基本使用
axios 必须先导入才可以使用
使用 get 或 post 方法即可发送对应的请求
then 方法中的回调函数会在请求成功或失败时触发（成功是第一个，失败时第二个函数）
通过回调函数的形参可以获取响应内容，或错误信息
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg", { username: "jack" })
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
</script>
</body>
</html>
2、vue 中的 axios
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el: "#app",
data: {
joke: "joke"
},
methods: {
getJoke: function () {
console.log(this);
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(
function (response) {
// console.log(response);
console.log(response.data);
that.joke = response.data;
}, function (err) {
console.log(err);
}
)
}
},
})
</script>
</body>
</html>
axios 回调函数中的 this 已经改变，无法访问到 data 中数据
把 this 保存起来，回调函数中直接使用保存的 this 即可
和本地应用的最大区别就是改变了数据来源
Vue中的动画
链接：Vue 动画
为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；
1、使用过渡类名实现动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 2.自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>
/* v-enter [这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to [这是一个时间点] 是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示 ，再点击，让 h3 隐藏 -->
<!-- 1. 使用 transition 元素，把需要动画控制的元素，包裹起来 -->
<!-- transition 元素,是Vue官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</body>
</html>
2、可修改 v- 前缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 2.自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>
/* v-enter [这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to [这是一个时间点] 是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
.my-enter-active,
.my-leave-active {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示 ，再点击，让 h3 隐藏 -->
<!-- 1. 使用 transition 元素，把需要动画控制的元素，包裹起来 -->
<!-- transition 元素,是Vue官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
<hr>
<input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
},
methods: {}
});
</script>
</body>
</html>
3、使用第三方类库实现动画
1）导入动画类库：
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
2）定义 transition 及属性：
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{enter: 200, leave: 400}">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入在线的animate库 -->
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<!-- 入场 bounceIn 离场 bounceOut -->
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 使用 :duration="{enter: 200, leave: 400}" 来分别设置 入场时长 和 离场时长 -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter: 200, leave: 400}">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</body>
</html>
4、使用钩子函数实现小球的半场动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="以上是关于3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）的主要内容，如果未能解决你的问题，请参考以下文章
Axios Vue.js 将对象数组从 store.js 传递给组件