每天学点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'>
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自blog.csdn.net/qq_42288851/article/details/106932902