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

每天学点Vue,学习笔记---DAY4相关推荐

【从 0 开始学架构】学习笔记 Day4 “4+1”视图模型
文章目录一.模型 (1)模型 (2)软件开发的本质 (3)架构设计二.4+1视图模型 1)定义 2)组成 (1)场景视图 (2)逻辑视图 (3)开发视图 (4)物理视图 (5)过程视图三.UML ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...

每天学点Vue,学习笔记---DAY4

每天学点Vue,学习笔记---DAY4相关推荐

最新文章

热门文章