Vue.js学习总结第三天

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

  我们没学过vue.js之前只知道jQuery的ajax(),现在我们来看一下如何用Vue发起ajax请求

             **前提条件：** 首先我们需要导入包

①vue的ajax方式的get请求

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

②vue的ajax方式的post请求

③vue的ajax方式的jsoup请求

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

                               jsoup的详解如下：

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

 先阐述问题：

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

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

三、Vue配置全局emulateJSON选项

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

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

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

四、Vue的过度和动画

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

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按钮时，文字从左往右移动，一边移动一边从”可见“变成”隐形“

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

<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <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”时，这个元素消失了（这两种解释都可以）