props

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

  1. <pagination :params="params"></pagination>
  2. data: function() {
  3. return {
  4. params: {
  5. per_page: 3
  6. }
  7. }
  8. },
  9. created: function() {
  10. this.params.page = 1;
  11. }
  12. // child-component
  13. <p> {{ params.per_page }} {{ params.page }} </p>// 3 1
  14. props: {
  15. total: Number,
  16. params: Object
  17. }

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

使用已经定义好的过滤器

  1. // fileName: formatDate.js
  2. import Vue from 'vue'
  3. Vue.filter('formatDate', function(value) {
  4. return new Date(value).toLocaleString()
  5. })
  6. const formatDate = Vue.filter('formatDate')
  7. export default formatDate
  8. // component
  9. <p>Posted at {{article.created_at | formatDate}}</p>
  10. 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. create pfile from spfile;

    sql>create pfile from spfile; 生成的文件在$ORACLE_HOME/dbs/下边    和spfile在同一个目录下 但是名字已经变成了init$oracle_si ...

  2. python常用模块(2)

    之前学了两个常用的模块collections和re模块今天我们接着学习其他几个常用模块.都是比较常用的之前的学习或多或少也有所接触比如说时间模块等. 预习: 写一个验证码 首先 要有数字 其次 要有字 ...

  3. 配置AIX系统互信关系

    解释: 信任关系指一台远程服务器的用户以相同的用户名接入到另外一台服务器,而无需提供口令. 双机之间建立信任关系后,可以使用“rcp”和“rlogin”等命令. 操作步骤: 1.以root用户登录双机 ...

  4. POJ 2479 Maximum sum 解题报告

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 40596   Accepted: 12663 Des ...

  5. akoj-1055-矩阵乘法

    矩阵乘法 Time Limit:1000MS  Memory Limit:65536K Total Submit:19 Accepted:7 Description 矩阵乘法是线性代数中最基本的运算之 ...

  6. 存储过程中使用select……into

    在MySQL存储过程中使用SELECT -INTO语句为变量赋值: 用来将查询返回的一行的各个列值保存到局部变量中. 要求: 查询的结果集中只能有1行. SELECT col_name[,...] I ...

  7. NYOJ 57 6174问题

    6174问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 假设你有一个各位数字互不相同的四位数,把所有的数字从大到小排序后得到a,从小到大后得到b,然后用a-b替 ...

  8. 解决百度BMR的spark集群开启slaves结点的问题

    前言 最近一直忙于和小伙伴倒腾着关于人工智能的比赛,一直都没有时间停下来更新更新我的博客.不过在这一个过程中,遇到了一些问题,我还是记录了下来,等到现在比较空闲了,于是一一整理出来写成博客.希望对于大 ...

  9. iPhone 尺寸

    http://tool.lanrentuku.com/guifan/ui.html 这是本人复制的链接,,

  10. WPF个人助手更新

    大家好,这次更新主要是去除一些无关的功能,界面做了很大的调整,以前都是自己写的 UI ,最近也引入了 WPF-UI ,挺不错的,特此表示感谢,也希望大家会喜欢,别的也就不多说了,本软件以实用性为主,采 ...