（1）data必须是一个函数
过程：定义一个组件的时候，data选项并不是直接提供一个对象，而是提供一个函数。
结果：因此每个实例可以维护一份被返回对象的独立的拷贝。
优点：当几个地方同时调用同一组件的时候，各个组件，互不影响
（实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.）
this.count == this.$data.count
（2）Vue.nextTick([callback,context])
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
全局API函数
（如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。IE下可能报错）
（3）Vue.use() 安装 Vue.js 插件
如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
（譬如下列 “import ElementUI from 'element-ui'” 之前，需要 “npm install element-ui”）
此方法须在调用new vue()之前被调用，（一般在main.js中设置）
（4）props
详细：props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
（5）computed计算属性 watch监听属性
watch监听属性 可用于父组件数据改变，触发子组件更新（异常好用）
（6）slot插槽
（6.1）简单插槽，无具名，通过子组件<slot></slot>的位置，就是父组件加进去的数据的位置
父组件：
<template>
<div class="slot_parent">
<slot-son>
<h2>我是父组件里面的内容</h2>
<h2>我是父组件里面的段落</h2>
</slot-son>
</div>
</template>
<script>
import SlotSon from '../slot_son'
export default {
name:'SlotParent',
components:{
SlotSon
}
}
</script>
子组件：
<template>
<div class="slot-son">
<p>这是子组件的页面内容</p>
<p>这是子组件的页面段落</p>
<br>
<slot></slot>
<br>
<p>这是子组件末尾数据</p>
</div>
</template>
<script>
export default {
name:'SlotSon'
}
</script>
效果：
（6.2）具名插槽
父组件 <element slot="[name]" ></element> 子组件<slot name="[name]"></slot>
可以看到下面的效果图，不管在父组件元素上面的位置是怎么样的，都是按照子组件具名slot的位置来排列
父组件：
<template>
<div class="slot_parent">
<br>
<slot-son>
<template slot="header">
<h1>在父组件上template元素上使用slot特性 名字为header的插槽</h1>
</template>
<br>
<p>父组件普通数据 插在子组件中没有具名的插槽</p>
<p>父组件普通数据 插在子组件中没有具名的插槽</p>
<p slot="footer">在父组件上普通元素上使用slot特性 名字为footer的插槽</p>
<p slot="header">在父组件上普通元素上使用slot特性 名字为header的插槽</p>
<br>
<template slot="footer">
<h3>在父组件上template元素上使用slot特性 名字为footer的插槽</h3>
</template>
</slot-son>
</div>
</template>
<script>
import SlotSon from '../slot_son'
export default {
name:'SlotParent',
components:{
SlotSon
}
}
</script>
子组件：
<template>
<div class="slot-son">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name:'SlotSon'
}
</script>
效果：
PS：项目中没有用到太多，只做了简单的一些操作（用其他操作也能达到效果）
（7）transition css过渡
mode：同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。（重写之前的开关按钮过渡）
name：过渡的类名
fade-transverse类名为 fade-transverse-enter fade-transverse-leave
<transition name="fade-transverse" mode="out-in"> <router-view class="router-view"></router-view> </transition>
.fade-transverse-leave-active, .fade-transverse-enter-active { transition: all .5s; } .fade-transverse-enter { opacity: 0; transform: translateX(-30px); } .fade-transverse-leave-to { opacity: 0; transform: translateX(30px); }