props

向子组件传递数据是经常会用到的,一般是在子组件定义 props 来接受数据,当父组件改变数据时子组件的数据也会进行更新。但这里是有一个坑的,先看代码:

<pagination :params="params"></pagination>

data: function() {
return {
params: {
per_page: 3
}
}
},
created: function() {
this.params.page = 1;
} // child-component <p> {{ params.per_page }} {{ params.page }} </p>// 3 1 props: {
total: Number,
params: Object
}

这里传递的是一个 object,在父组件中定义一个方法改变 params 的 per_page 和 page 的值,但子组件只有 params.per_page 的值更新了,page 的值是没有更新的。这是因为 vue 只会跟踪 data 函数里定义的变量,所以想要 page 也更新,在 data 的 params 里加上 page 属性就行了。

使用已经定义好的过滤器

// fileName: formatDate.js

import Vue from 'vue'

Vue.filter('formatDate', function(value) {
return new Date(value).toLocaleString()
}) const formatDate = Vue.filter('formatDate') export default formatDate // component <p>Posted at {{article.created_at | formatDate}}</p> import formatDate from '../filters/formatDate.js'

 

vue2的更多相关文章

  1. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  2. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  3. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  4. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  5. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  6. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  7. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  8. vue2.0实战

    学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...

  9. vue DatePicker vue2.0的日期插件

    一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...

  10. vue2/vuex2的那点坑

    说是坑,其实大部分是我们自己的过错! vuex官方demo在1.0可以运行,在2.0报错?此类问题,应该很常见吧? 还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了? ...

随机推荐

  1. CrashMonkey4Android 的安装及使用

    CrashMonkey4Android 的安装及使用 简介 CrashMonkey4Android,是一个依靠Cts框架,对原生Monkey进行改造后的产物,拥有以下新增功能: 保存每一步的截图 保存 ...

  2. 抓取60000+QQ空间说说做一次数据分析

    对于QQ空间的数据一直来是垂涎不已,老早就想偷过来研究研究,这几天闲下来便开始动手... 整个程序的流程为:登录-->获取cookie-->获取所有的好友qq_number-->根据 ...

  3. github、gitlab 管理多个ssh key

    第一种方法: 通过 git 命令行来操作 1.cd ~/.ssh 2.ls 注:如果.ssh 目录下有文件存在那么表示之前添加过 3. ssh-keygen -t rsa -C "xxxxx ...

  4. CocoaPods的一些略为高级一丁点的使用【转】

    记得我刚开始做iOS开发的时候,是没有项目依赖管理工具.当需要引入第三方库的时候是相当麻烦的,不是直接拷贝库近来,就是添加依赖工程,直到CocoaPods出来才改变这个状况.项目依赖管理不是Cocoa ...

  5. vue-router的使用

    关于vue-router的基本使用方法    首先,需要下载vue-router npm install vue-router --save vue-router在html或组件中的展现 ``` &l ...

  6. Jenkins小菜初次使用小记

    title: Jenkins自动集成小记 Jenkins是用来自动构建任务的,也许你还不知道什么叫自动构建任务,它的意思是可以针对某个任务进行自动化,比如你开发的某个软件,每次写完代码提交到githu ...

  7. AKOJ -- 1529 -- 寻找最大数

    1529: 寻找最大数 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 107  Solved: 53 上一题SubmitStatus标签打分编辑题目信 ...

  8. hadoop搭建在Ubuntu16.04上

    一.环境 Ubuntu16.04.Hadoop2.7.3.java8 系统安装完成后建议先更新一下 apt源 1.复制原文件备份 sudo cp /etc/apt/source.list /etc/a ...

  9. Linux Socket多线程实现简单的多人聊天(pend)

    Server: 设置可聊天数为5,为每一个client创建一个线程,这个线程负责接收client的聊天内容并发给其他用户看. 用mutex同步各个线程修改聊天室空余聊天位. Client: 主线程负责 ...

  10. Android 划屏切换调用finish()方法闪屏问题

    找了许多资料,偶然发现有种解决方法,就是修改style.xml里的Theme,有些NotitleBar,透明主题直接就能将此问题解决 原理也很简单,如果透明,背景色既为透明色,调用finish()时虽 ...