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