#编写可复用组件

在编写组件时,最好考虑以后是否要进行复用,可复用组件应当定义一个清晰的公开接口,同时也不要对其使用的外层数据作出任何假设.

Vue组件的API来自三个部分--prop,事件和插槽:

1. Prop允许外部环境传递数据给组件;

2. 事件允许从组件内触发外部环境的副作用;

3. 插槽允许外部环境将额外的内容组合在组件中.

#子组件引用

尽管有prop和事件,但是有时仍然需要在JavaScript中直接访问子组件.为此可以使用ref为子组件指定一个引用ID.

<div id="parent">

      <user-profile ref="profile"></user-profile>

</div>

var parent = new Vue({

     el:"#parent"

})

var child = parent.$refs.profile

#异步组件

在大型应用中,可能需要将应用拆分为多个小模块,按需从服务器下载,Vue允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染.

Vue.component('async-example', function(resolve, reject){

      setTimeout(function(){

            resolve({

                  template:"<div>I am async </div>"

            })

     }, 1000)

})

进入/离开&列表过渡

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

Vue提供了transition的封装组件,在下列情形中可以给任何元素和组件添加entering/leaving过渡

1.条件渲染(使用v-if)

2.条件展示(使用v-show)

3.动态组件

4.组件根节点

<div id="demo">

      <button v-on:click="show = ! show">Toggle</button>

      <transition name="fade">

           <p v-if="show">hello</p>

     </transition>

</div>

new Vue({

     el:"#demo",

     data:{

          show:true

     }

})