1、如果我们全局配置了请求的数据接口 根域名，则在每次单独发起 http 请求时，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接；
Vue.http.options.root = 'http://vue.studyit.io/';全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true;2、导入 Vue-resource 包，可直接通过 this.$http 发起数据请求。
（1）this.$http.get('url').then(function(result){});
注意： 通过 $http 获取到的数据，都在 result.body 中放着。
（2）this.$http.post(请求地址, 参数, 配置对象).then(function(result){});
配置对象 --> 以哪种表单数据类型提交，{ emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
3、transition 元素。
transition 元素 --> Vue 官方提供的，使用 transition 元素，把 需要被动画控制的元素，包裹起来。
（1）控制 transition 内部的元素实现动画样式：
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition> v-enter --> 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入。
v-leave-to --> 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了。
v-enter-active --> 【入场动画的时间段】。
v-leave-active --> 【离场动画的时间段】。
（2）修改动画样式前缀（v）
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition> .my-enter、.my-leave-to、.my-enter-active、.my-leave-active
4、使用第三方类实现动画
（1）入场-->bounceIn 离场-->bounceOut
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个H3</h3>
</transition>（2）使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长。
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>（3）使用 :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> 5、动画钩子函数
第一个参数（el）--> 要执行动画的DOM元素，原生 JS DOM对象，可以理解为通过 document.getElementById('') 获取到原生JS DOM对象。
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>methods: {
beforeEnter(el){
// 动画入场之前，此时，动画尚未开始，可在此设置元素开始动画之前的起始样式
},
enter(el, done){
// 动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
// el.offsetWidth --> 没有实际的作用，但是，如果不写，出不来动画效果；可以认为 el.offsetWidth 会强制动画刷新
// done --> afterEnter 函数的引用 done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
}
}6、通过 v-for 循环渲染出来的元素的动画
<transition-group appear tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="del(i)"> ... </li>
</transition-group> （1）通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup，并且必须为每一个 元素 设置 :key 属性。
（2）给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果。
（3）通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，若不指定 tag 属性，默认渲染为 span 标签。
7、组件
（1）使用 Vue.extend 创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
});（2）使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component('mycom1', Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
})); 用 Vue.component 定义全局组件时，若组件名称使用了 驼峰命名，则在引用组件的时需要把 大写的驼峰改为小写的字母，同时，两个单词之前使用 - 链接。
如果不使用驼峰,则直接拿名称来使用即可。
第一个参数 --> 组件的名称，通过 标签形式 来引用组件。
第二个参数 --> Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML内容
组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素。
（3）在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构
<div id="app">
<mycom3></mycom3>
</div>
<template id="tmpl">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template>Vue.component('mycom3', {
template: '#tmpl'
}); （4）组件中的 data 数据
组件中的 data 必须是一个方法，还必须返回一个对象，data 数据的使用方式和实例中的 data 使用方式完全一样。
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
},
methods: {
方法名() {
...
}
}
});（5）Vue提供了 component，来展示对应名称的组件，component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称
<component :is="comName"></component>