vue经验总结
1. vue中获取dom节点时机
vue组件中获取dom节点一定要在mounted周期之后的下一次事件循环,包括 component.$refs,component.$el,component.$children等
一般写法在nextTick中获取,mounted不是必须:
mounted(){
this.$nextTick(() = {
const el = this.$el;
})
}
2.watch变量合并更新
vue的dom更新是异步的,因此watch一个变量时候,短时间内频繁更新该变量的值,其watch方法只会执行一次
例如,在for循环总更新一个被watch的变量。解决方法,可以使用setTimeout延迟更新或者直接调用watch的方法。
3.vuex的页面弹出error
可以在vuex的module state中添加error字段,ajax出错时,将错误赋值为error,
组件内再watch error字段,弹出error内容
4.watch $route触发时机
watch $route的方法只在组件被复用,即同一个组件内的路由切换时候,即同一个一级路由下的二级路由发送变化时候触发。
如果是一级路由发生变化,组件会被重新创建,会触发created方法,不会触发$route。在二级路由之间跳转,只有一级路由相同才触发。
例如:
/user/:id, id是个参数 /user/1 到 /user/2 会触发user组件的$route方法
/account,/account/list,/account/create 从/account/list到/account/create会触发account组件的$route方法,从/account/list到/user/1不会触发
const User = {
template: '...',
watch: {
'$route' (to, from) { }
}
}
5. Unknown custom element: <router-view>
6. vue的props在模板中不能用驼峰
在vue的props中可以使用驼峰写法的属性,但是在模板中必须改成中划线形式,例如backClass在模板中必须改成back-class,否则会被当成是html标签的自定义属性,在props中取不到值
7. vue获取路由参数
在vue组件中,使用this.$route获取路由相关信息,不是$router.
//params
this.$route.params
//query
this.$route.query
vue经验总结的更多相关文章
- vue经验 - 细节小知识点汇总(更新中...)
1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...
- vue经验 - 实战疑点总结
1.注册全局组件(是一个单vue页面组成的一个组件,而不是现拼的template结构) 结构: 代码:main.js import UserList from './components/UserLi ...
- vue经验 - 那些自己给自己挖的深坑
深坑场景:vue-异步请求数据,数据还没回来,页面却如饥似渴的准备好了的尴尬场景:问题原因和解决如下: 1.先说vuex中的store,一开始我为了偷懒是这么设置的,如下图: 然后我到了组件中直接这么 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
- [转]vue全面介绍--全家桶、项目实例
慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”. ...
- vue全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.相比于Angular.js,Vue.js提供了更加简 ...
- vue全面介绍--全家桶、项目实例
简介 “简单却不失优雅,小巧而不乏大匠”. 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们 ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- vue—你必须知道的
更多总结 猛戳这里 属性与方法 不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数.因为箭头函数会绑定父级上下文, ...
随机推荐
- double类型的小数,四舍五入保留两位小数
import java.math.BigDecimal; public class Kewai{ public static void main(String[] args) { double f = ...
- Mysql之1451 - Cannot delete or update a parent row: a foreign key constraint fails...解决办法记录
今天使用delete语句删除一张表中的一条信息时,提示了这么一个错误:1451 - Cannot delete or update a parent row: a foreign key constr ...
- 一道JS面试题所引发的"血案",透过现象寻本质,再从本质看现象
觉得本人写的不算很烂的话,可以登录关注一下我的GitHub博客,新手写东西写的不好之处,还望见谅,毕竟水平有限,写东西只为交流提高,一起学习,还望大神多加指点,指出纰漏,和提出宝贵的意见,博客会坚持写 ...
- Python数据类型的用法
字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...
- python3 练习题100例 (十)
题目十:判断101-200之间有多少个素数,并输出所有素数. #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ 题目十 ...
- 笔记-python-standard library-8.5.heapq
笔记-python-standard library-8.5.heapq 1. heapq-heap queue algorithm源码:Lib/heapq.pythis module provide ...
- Diycode开源项目 MyTopicActivity分析
1.总体浏览效果及布局分析 1.1.看一下我的帖子预览效果 1.2.然后看一下我的收藏预览效果 1.3.归纳一下 所以我的帖子和我的收藏可以共用同一个类. 布局效果几乎一样,只是用户的选择不同. 所以 ...
- mysql不能登陆
前些天还正常运行的mysql,不知怎么就不能登陆了.错误提示为 :ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (1 ...
- TypeError: cannot perform reduce with flexible type
想要解决这个错误,最好先明白numpy数据类型的dtype转换 生成一个浮点数组 a=np.random.random(4) 输出 a array([0.0945377,0.52199916,0.62 ...
- Notepad++ 32 位 PluginManager 下载
github 下载地址:(有 64 位的哦) https://github.com/bruderstein/nppPluginManager/releases 1. PluginManager 管理插 ...