Vue.js学习总结第三天

ゝ一世哀愁。 2022-02-09 08:24 309阅读 0赞

# Vue.js学习总结第三天 #

## 一、vue-resouce发起post、get、jsoup请求 ##

我们没学过vue.js之前只知道jQuery的ajax(),现在我们来看一下如何用Vue发起ajax请求
    
                 **前提条件：** 首先我们需要导入包

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU1MzYucG5n][]

### ①vue的ajax方式的get请求 ###

如果是回调成功，那么得到的result.body.status就等于0，表示成功了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2MDgucG5n][]

### ②vue的ajax方式的post请求 ###

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2MjkucG5n][]

### ③vue的ajax方式的jsoup请求 ###

（jsoup方式和get方式不同的地方就是“jsoup可以在ajax里面实现跨域请求”）

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2NTUucG5n][]

jsoup的详解如下：

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3MTUucG5n][]

## 二、Vue配置全局数据接口的根路径 ##

先阐述问题：

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3MzUucG5n][]

解决方案如下：配置全局的数据接口的根域名

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3NTIucG5n][]

然后再修改原路径即可，系统运行时会自动进行拼接

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU4MzUucG5n][]

## 三、Vue配置全局emulateJSON选项 ##

阐述问题：每次写请求时都要在后面加上emulateJSON:true，写起来会很麻烦的

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU4NTcucG5n][]

解决办法：配置全局启用emulateJSON选项

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5MjIucG5n][]

然后我们就可以不用每次都在请求里面写emulateJSON:true了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5MzcucG5n][]

## 四、Vue的过度和动画 ##

opacity：不透明度，模糊，不清晰，当opacity=0时，就是“隐形的”，当opacity=1时就是“完全的实心”

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5NTkucG5n][]

v-enter,v-enter-to,v-leave,v-leave-to都是时间点

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。  
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。  
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。  
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

**接下来看一个例子：**

先看代码部分如下： 讲解：可以看到在.v-enter， .v-leave-to里面写了一个 transform: translateX(100px);就是说“进入的起点”和“离开的终点”的位置都在（100px，0）处，然后要注意transition组件必须要包在一个v-if或v-show的外面，不然的话不起作用

效果就是：“当我们点击input按钮时，文字先从右边往左边移动，一边移动一边从”隐形“变得”可见“（这是enter过程），当我们再次点击input按钮时，文字从左往右移动，一边移动一边从”可见“变成”隐形“  
![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNTAwMjIucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNTAwMzkucG5n][]

利用钩子函数实现半场动画

<html>
        <head>
            <meta charset='utf-8'>
            <title></title>
            
            <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
            <style> .ball{ width: 20px;// height: 20px;//设置球的宽度和高度 border-radius: 50%;//设置球的半径比例 background-color: red;//设置球的颜色 } </style>
        </head>
        <body>
            <div id='app'>
                <input type="button" value="快到碗里来" @click="flag = !flag">
                <transition  /* v-on:before-enter表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始之前的起始样式 */ 
                    v-on:before-enter="beforeEnter"  
                    v-on:enter="enter"  /*v-on：enter表示动画开始之后的样式*/
                    @after-enter="afterEnter"/*动画结束之后*/
                >
                    <div class="ball" v-if="flag"></div>
                </transition>
            </div>
        
        </body>
        <script> // 实例化vue对象 let vm = new Vue({ // 绑定对象 el:'#app', data:{ flag:false }, methods:{ // 动画钩子函数：el,表示 要执行动画的那个DOM元素，是一个原生的js对象 beforeEnter(el){ //berareEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置开始动画之前的样式 el.style.transform = "translate(0,0)" //设置小球的初始坐标位置 }, enter(el,done){ //这里的done 其实就是afterEnter // 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的样式，结束状态 el.offsetWidth //得写这个，会强制动画刷新 el.style.transform = "translate(150px,450px)" el.style.transition = 'all 1s ease' done() //这里的done 其实就是afterEnter，官方文档说这个必须调用一下 }, afterEnter(el){ // 动画完成之后 console.log("ok") this.flag = false//修改flag来控制小球是否显示 } } }) </script>
    </html>

小疑问：我们可以看到在transtion标签里头总有一个v-if或者v-show,这是触发动画开始的必要条件当v-if或者v-show=true时开始触发动画，也就是说v-if=“flag”里面的flag为true或flase影响很大，而在上述afterEnter()方法里写了this.flag=false,之后就不展示动画了所以小球消失，也可以理解为v-if=“flase”时，这个元素消失了（这两种解释都可以）

[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU1MzYucG5n]: /images/20220209/f10492e2b7044a30b3c3d767abd18569.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2MDgucG5n]: /images/20220209/502edb5366fe47a191364f40f28d12f2.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2MjkucG5n]: /images/20220209/82b68b13ba484f74aad702e1e5b140ab.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU2NTUucG5n]: /images/20220209/3d09d8e0a59e4f81bb3fe762af0b1937.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3MTUucG5n]: /images/20220209/f93dcceceadb433e8db5606ab53611f5.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3MzUucG5n]: /images/20220209/fe1e740d42a943a4b5565be78ff87e49.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU3NTIucG5n]: /images/20220209/d0e0eaf5011f42baa79768b3b8381057.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU4MzUucG5n]: /images/20220209/d4456625f4364c0994f3ce2812708a59.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU4NTcucG5n]: /images/20220209/da95fbf39d3845b28355bd46c9fb3822.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5MjIucG5n]: /images/20220209/3669d0e0c64a46678caeb0c73c4d9f40.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5MzcucG5n]: /images/20220209/7b4cc68ce30d4a1dba39cd5bcfb45b79.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNDU5NTkucG5n]: /images/20220209/e39204a76f4842059128326c591100f0.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNTAwMjIucG5n]: /images/20220209/a33c9c008e0b4ff3b5f136359c52de40.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA0MjQxNTAwMzkucG5n]: /images/20220209/f76d53b0c40d4e0ea52067e5abf8c0d3.png