Vue之不为我知

　　（1）data必须是一个函数

过程：定义一个组件的时候，data选项并不是直接提供一个对象，而是提供一个函数。

结果：因此每个实例可以维护一份被返回对象的独立的拷贝。

优点：当几个地方同时调用同一组件的时候，各个组件，互不影响

　　（实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.） 　　

　　　　this.count == this.$data.count

详情可见官方网站：https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

 

（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);
  }