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())使用箭头函数.因为箭头函数会绑定父级上下文, ...
随机推荐
- SQL数据库查询出一张表中重复的数据,按某个字段来查找。
例如表名为Course 需要查询出name重复的有那些??? 解答如下: 补充: 如:查询每个姓名出现大于2次,SQL如下 SELECT COUNT(NAME) as '出现次数', NAME FR ...
- Cannot read property 'tap' of undefined
E:\vue-project\vue-element-admin-master>npm run build:prod vue-element-admin@3.8.1 build:prod E:\ ...
- java--creater in windows
电脑右键--高级--属性--更改环境变量 1.JAVA_HOME C:\Program Files\Java\jdk1.7.0_04 2. Path %JAV ...
- API Star:一个 Python 3 的 API 框架
为了在 Python 中快速构建 API,我主要依赖于 Flask.最近我遇到了一个名为 "API Star" 的基于 Python 3 的新 API 框架.由于几个原因,我对它很 ...
- tcl之内容
- 转 Laravel 的核心 —— 服务容器
具体内容请参考 1.laravel 学习笔记 —— 神奇的服务容器 - 灵感 - 来自生活的馈赠https://www.insp.top/article/learn-laravel-container ...
- 02 python网络爬虫《Http和Https协议》
一.HTTP协议 1.概念: Http协议就是服务器(Server)和客户端(Client)之间进行数据交互(相互传输数据)的一种形式. 之间形成的特殊行话(黑话:(土匪)天王盖地虎,(我)宝塔镇河妖 ...
- oracle 事务 第二弹
一 数据库版本 SYS@LEO1>select* from v$version; BANNER ------------------------------------------------- ...
- Unidirectional TSP UVA - 116 多段图的最短路
题目:题目链接 思路:从后往前进行dp,用next数组记录字典序最小的那一条路径 AC代码: #include <iostream> #include <cstdio> #in ...
- Keepalivaed +Nginx proxy 高可用架构方案与实施过程细节
1.开源产品介绍 1)CMS介绍 官方网站http://www.dedecms.com/,是一个网站应用系统构建平台,也是一个强大的网站内容管理系统,既可以用来构建复杂的体系的企业信息门户或者电子商务 ...