发起数据请求

vue挂载了this.$http属性
引入vue-resource
1.发起get请求

getInfo(){
            this.$http.get('http：//vue.studyit.io/api/getiunbo').then(function(result){
                    console.log(result.body)
                })
            }

发起get请求之后，通过.then来设置成功的回调函数.
通过result.body拿到服务器返回成功的数据
post请求，手动发起的post请求没有表单格式（application/x-www-form-urlencoded），所以有的服务器处理不了,通过post方法的第三个参数，{emulateJSON:true}设置提交的内容为普通表单数据格式

postInfo(){
                        this.$http.post('http:// ',{},{emulateJSON:true}).then(result=>{
                            console.log(result.body)
                        })
                    },

jsonp请求

jsonpInfo(){
                        this.$http.jsonp('https://api.douban.com//v2/movie/top250')
                                  .then((response) => {
                                   this.movie = response.data;
                                    console.log(this.movie);
                                     });             
                    }

动画

使用过渡类名实现动画

使用transition元素把需要被动画控制的元素包裹起来，是vue官方提供的一个元素

<input type="button" value="toggle" @click="flag=!flag" />
    <transition>
    <h3 v-if="flag">h3效果</h3>
    </transition>

v-enter（这是一个时间点）是进入之前元素的起始状态，此时还没有进入
v-leave-to是动画离开之后，动画离开的终止状态，此时元素动画已经结束
v-enter-active出厂动画的时间段
v-leave-active离场动画的时间段

实现淡入淡出效果

<style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            
        }
        .v-enter-active,
        .v-leave-active{
            transition: 2s ease;
        }
        </style>

横向移动消失/出现

.v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
            
        }

自定义修改v-前缀

当要实现多个区域的多个动画效果时指定transition的name并将样式的v-前缀修改成name的内容，内容纵向消失/出现

.my-enter,
        .my-leave-to{
            opacity: 0;
            transform: translateY(150px);
            
        }
        .my-enter-active,
        .my-leave-active{
            transition: 2s ease;
        }

<input type="button" value="toggle2" @click="flag2=!flag2" />
    <transition name="my">
    <h5 v-if="flag2">h5效果</h5>
    </transition>

使用第三方css

使用第三方animate.css实现效果选用bounceIn和bounceOut目标元素弹动出现/消失

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h2 v-if="flag2">h2效果</h2>
    </transition>

使用钩子函数

使用钩子函数实现小球半场动画（类似购物车加入效果）

<transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            >
                
                <div class="ball" v-show="flag"></div>
            </transition>

beforeEnter表示动画入场之前，可以设置元素在动画之前的起始位置

beforeEnter(el){
                    el.style.transform="translate(0,0)"
                },

enter表示动画开始之后的样式，可以通过设置完成动画之后的结束状态

enter(el,done){
                                    el.offsetWidth
                                    el.style.transform="translate(150px,450px)"
                                    el.style.transition="all 1s ease"
                                    done()                                                                  },

el.offsetWidth没有实际意义，但是没有这句话就会没有动画效果，可以认为会强制刷新动画
done()其实就是afterEnter这个函数，也就是说done就是一个函数的引用（它的作用就是在动画结束后如果不使用它小球还会存在一段时间后才会消失，而不是在流畅的动画过程中消失）
afterEnter动画完成后会被调用

afterEnter(el){
                                    
                                     this.flag=!flag
                                }

列表动画

在实现列表过渡的时候，如果需要过渡元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transition-group

<ul>
                <transition-group appear  tag="ul">
                <li v-for="item in list" :key="item.id">{{item.id}}---{{item.name}}</li>
                </transition-group>
            </ul>