每天学点Vue,学习笔记---DAY4
小球动画过程分析与flag在动画过程中的作用 :
动画被分为两个阶段,一个是前半场动画,一个是后半场动画
使用flag是后半场动画不执行,每次执行前半场完,flag取非,
下次执行还是前半场动画.
组件的复习:
父组件向子组件传值和data与props的区别:
data中的值是可读可写的
props中的值是只读的(写的时候会报警告,不推荐用,要写用data),组件中的所有props中的数据,都是通过父组件传递给子组件的
如何定义:
用v-bind:parentmsg="父变量值",然后在子组件的props[parentmsg]定义这个变量接收. 用{{parentmsg}}使用
父组件向子组件传方法:
用v-on方法绑定:vm定义一个父方法show
使用v-on:name="show"绑定父方法到子组件上
使用this.$emit('show')来调用父方法
活用:可通过有参方法,将子组件的值传给父组件
this.$emit('show',子参数)
show(){
父参数=子参数
}
vm的data:{
父参数=null
}
使用localStorage完成评论的功能:
list.push:尾部添加
list.unshift:头部添加
使用@func="loadComments"让父组件的方法可以在子组件里用
$refs的用法:
普通使用如下:
组件中使用如下:
1.可以使用组件的变量this.$refs.mylogin.msg
2.可以使用组件中的方法this.$refs.mylogin.show()
路由的概念:
vue-router.js 包的使用:
自动安装:通过<script标签>
手动安装:
路由的基本使用:
<router-view></ router-view>:占位符,由vue-router提供,组件切换内容显示在这里
<router-link></router-link>:to:切换哪个组件,tag:渲染成什么标签,默认<a>
path中redirect的使用:好处-可以让浏览器路径显示组件路径,而不是显示/#
基本代码:
路由规则传参:
1.使用query传参
2.使用params:
多个参数:
子路由的嵌套:
children的使用:
<router-view></router-view>
子路由的path前面不要带'/',否则永远以根路径开始请求,这样不方便用户理解url地址
使用命名视图:给<router-view name='xx'>