美文网首页
学习vue2.0笔记(第四章上)

学习vue2.0笔记(第四章上)

作者: 这很重要吗 | 来源:发表于2017-05-19 14:46 被阅读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

相关文章

网友评论

      本文标题:学习vue2.0笔记(第四章上)

      本文链接:https://www.haomeiwen.com/subject/cuhyxxtx.html