Please enable JavaScript.
Coggle requires JavaScript to display documents.
vue - Coggle Diagram
vue
动画
过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开
out-in：当前元素先进行过渡，完成之后新元素过渡进入
用 out-in 重写之前的开关按钮过渡
初始渲染的过渡
可以通过 appear attribute 设置节点在初始渲染的过渡
多个元素过渡
v-if/v-else
列表过渡
<transition-group>
Vue 提供了 transition 的封装组件
入场v-enter-form
出厂v-enter-to
过渡v-enter-active
v-leave-from
自定义过渡的类名
全局局部组件
组件的定义，组件的复用性全局组件，只要定义了，处处调用，性能低
局部组件定义components:{a:a}
局部组件大写，驼峰命名，使用起来性能高
组件的值传递
父传子
子接收props:{ con:string }
父传递:<index v-bind:mi><index>
属性
required必填
default默认值
动态组件和异步组件
<component :is='comp'></component>
根据comp决定组件
<keep=alive>
记录数据变更，缓存
动态组件：根据数据的变化，结合compoent这个标签，
来随时动态切换组件的显示
异步组件
异步执行组件的逻辑
动画
钩子
handleBeforeEnter(el){el.style.color ="red"}
handleEnterActvie(el,done){setInterval(){}setTimeout(){}}
标签换成组件进行动画实现
v-move
列表动画
template实现多个单元素标签之间的切换
多个单组件之间的之间的切换
单项数据流
命名
传递使用cont-ab，接收使用contAb
父组件传递的数据子组件无法更改
只读
插槽
slot插槽
<slot></slot>父模板里调用的数据，都是调用的父模板里的数据，子模板传递的数据都是使用的子模板里的数据
父组件想对子组件传递标签字符串
<slot>def value</slot>
<template v-slot:"foter">
调用<slot name='foter'><slot>
具名插槽
高级语法
.#:"foter"
组件之间的传值
Non-props属性是什么
父传子，子不接收，数据在外部div中，inheritAttrs ：false子组件不接收
<div v-bind="$attrs"></div>父组件传递的所有属性传递到这个div
$attrs
:msg="$attrs.msg"
通过事件
子组件addOne(){ this.$emit('addOne') } this.$emit('add',2,3,4)
父里面的子接收@add-one
='addOne' addOne(pa1,pa2,pa3)
父子组件的通信emits
props:['app'] this.$emit('update:app'thismodeVlue+3)
跨域多层传递
跨域多层组件传递值
provide{name:1}父
inject:[name]孙
第三章最后，补充
v-once让某个元素标签只渲染一次
ref实际上是获取Dom节点/组件引用的一个语法
provide / inject
