文档章节

Vue 小记

吟啸_徐行
 吟啸_徐行
发布于 2017/08/31 15:52
字数 257
阅读 19
收藏 0
点赞 0
评论 0

场景:Vue spa 需要点击同一路由的时候刷新当前页(组件)

<router-view :key="$route.query.t"></router-view>
router.push({
            path:NameLinkMap[linkName],
            query:{
                t:+ new Date()
            }
        })

原理:利用router-view自身属性向下传递渲染,以及vue的特殊属性key

https://vuejs.org/v2/api/#key

参考issue:https://github.com/vuejs/vue-router/issues/296

场景:console.log调试数据不对劲

在vue全局data中,很可能会碰到刚定义的空数组,输出来就不是空的了,原因是

  1. console.log()传入的参数如果指向一个对象,它记录下的是这个对象的引用。
  2. 当你查看输出结果时,才会读取这个对象,把相关属性和值显示出来

所以后来对数组的修改操作会反应在之前的log中

解决方案:深度拷贝对象,再log

console.log(JSON.parse(JOSN.stringify(o)));

详情参考:http://xuhp.github.io/chrome's-JavaScript-console-is-lazy/

重置component的数据

this.$data = this.$options.data()

重新初始化component

<component :key="key"></component>

给组件一个key值,然后需要初始化的时候就改变key值

© 著作权归作者所有

共有 人打赏支持
吟啸_徐行
粉丝 18
博文 108
码字总数 15604
作品 0
深圳
程序员
让IntelliJ IDEA支持.vue文件

最近将idea升级到2018的版本,需要重新配置一下vue的环境,所以随便整理了一下操作过程。 第一步:先安装vue插件: file --> settings --> plugins,然后什么都不用输入,直接点击Browse re...

四小七 ⋅ 05/11 ⋅ 0

人人都能懂的Vue源码系列(一)—Vue源码目录结构

阅读Vue的源码,或者阅读一个框架的源码,了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。 Vue各目录简介 Vue源码各个目录的详细介绍 熟悉每个模块具体的功能,对之后深...

淼淼真人 ⋅ 05/14 ⋅ 0

使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七 ⋅ 05/09 ⋅ 0

vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888 ⋅ 05/22 ⋅ 0

Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will ⋅ 04/05 ⋅ 0

入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔 ⋅ 06/02 ⋅ 0

vue如何新建一个项目(超详细哦)

vue创建项目(npm安装→初始化项目→发布) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序(CMD),检查是否正常 ...

程序员是粉色的 ⋅ 05/27 ⋅ 0

Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh ⋅ 05/14 ⋅ 0

深入理解Vue的watch实现原理及其实现方式

理解Vue中Watch的实现原理和方式之前,你需要深入的理解MVVM的实现原理,如果你还不是很理解,推荐你阅读我之前的几篇文章: 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式 vue.js源码解读...

wangweianger ⋅ 05/14 ⋅ 0

拭目以待/GridManager-Vue

GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。 API 该文档为GridManager的文档,除了中存在差异外,...

拭目以待 ⋅ 06/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim编辑模式、命令模式

编辑模式 vim要从一般模式进入编辑模式只要按字母 i 、I、a、A、o、O键就可以了 要从编辑模式回到一般模式按键盘上的Esc键即可。 按键 作用 i 在当前字符前插入 I 在光标所在行的行首插入 o ...

黄昏残影 ⋅ 22分钟前 ⋅ 0

OSChina 周五乱弹 —— 如果有一天不当程序员了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享off的单曲《我唱情歌给你听》 《我唱情歌给你听》- off 手机党少年们想听歌,请使劲儿戳(这里) @小小编辑 :#如果不做程序...

小小编辑 ⋅ 29分钟前 ⋅ 4

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

Java8新增的DateTimeFormatter与SimpleDateFormat的区别

两者最大的区别是,Java8的DateTimeFormatter也是线程安全的,而SimpleDateFormat并不是线程安全。 在并发环境下使用SimpleDateFormat 为了能够在多线程环境下使用SimpleDateFormat,有这三种...

人觉非常君 ⋅ 今天 ⋅ 0

多线程如何控制执行顺序

线程的生命周期说明: 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New)、就绪(Runnable)、运行(Running)、...

MarinJ_Shao ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Django第一期

安装Django 去https://www.djangoproject.com/download/ 下载最新版的Django,然后解压放到Anaconda\Lib\site-packages目录下,然后cmd进入此目录,输入安装命令: python setup.py install ...

大不了敲一辈子代码 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部