学习vue2.0笔记（第四章上）

推荐用以下方式引入组件

is引入组件，实现动态组件

image.png

动态组件，修改data里面comtorender的值，可以引入不同的组件

image.png

父子组件之间的通信

父向子组件传递一个属性number

image.png

子组件通过props选项声明number

属性大小写不敏感，所以不能用驼峰的方法，用中线

image.png

props：数组，字符串
指定传值类型是number或者string

image.png

父组件传递的是变量

image.png

image.png

子组件向父组件传递信息时，通过触发事件，事件名不支持驼峰写法，用中线
插槽功能： slot标签，父向子组件传递模板
父组件在子组件内增加了一个p标签

子组件

子组件通过slot接收

image.png

更复杂的情况

image.png

image.png

keep-alive内置标签，缓存组件，提高加载速度

image.png

实现动态组件的两种方法：is或者v-bind
总结

image.png

vue-高级功能

image.png

过渡-动画效果（css过渡或者js过渡）
通过4个类名实现css过渡

image.png

transition标签
定义name属性的名称：比如fade

image.png

再为不同的阶段定义不同的样式

image.png

transform控制位置变化

三种模式v-show，v-if，is动态组件
多元素过渡，transition标签默认in-out模式，先进新的元素，后出旧的元素，通过mode可以控制动画展示过程

image.png

注意：多元素，如果是相同标签，那么不展示动画效果，必须通过key属性来区分

image.png