vue的坑
1. (vue2.x以上,1.x没有问题)vue和jq一起使用的冲突:在使用了v-bind: class的元素上,当vue和jq都需要增改class时,用jq加的属性可能无效。
原因:当数据的布尔值改变后(比如某个class需要加上),由于vue是在本次事件轮结束后更新DOM或改变属性,而jq的addClass是同步的,所以jq加上的类名会被vue覆盖。
解决方案:将jq的addClass写在Vue的nextTick里
2. 局部的components和路由的component分开放,路由的放在视图view文件夹里
3. v-show 只是在绑定值为false时加上display:none 在true时移出,而不会加上display:block 所以如果单独在css里写了display:none 即使这个元素v-show为true也是显示不出来的
4.vue做侧栏导航,用锚点实现,点击时切换active样式,当active = index直接写在模板的@click中时,导致锚点出bug,换成this.active = index 或者换成在method里写就没问题。(???不明原因)
5. 当路由切换时,vue组件及对应的数据会被就地销毁,*注意:如果vm的data里引用的是一个对象,而这个对象定义在vue的option对象外,将会形成闭包,将这个数据对象缓存起来,即使切换到别的页面,当再切换回来时,vue再次加载组件,还可以引用之前的数据对象(保留之前的所有状态)
eg.
//闭包中的data,即使vue实例被销毁它也不会消失
var data = {.....}
//vue option对象
export default {
data() {
return {
data: data
}
}
}
一般来说,这样是弊大于利,虽然利于保存一些状态,但增加了污染的可能性。尤其是当页面中复用了好几个组件时,data将是共享状态的,容易出问题。
vue的坑的更多相关文章
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Vue入坑教程(二)——项目结构详情介绍
之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- Vue入坑第一篇
写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...
- Vue入坑日记: day - 01
前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
随机推荐
- Appscan
IBM AppScan该产品是一个领先的 Web 应用安全测试工具,曾以 Watchfire AppScan 的名称享誉业界.Rational AppScan 可自动化 Web 应用的安全漏洞评估工作 ...
- python之路---11 第一类对象 函数名 闭包 迭代器
二十九. 1.函数名的运用 ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址 ③ 函数名可以赋值给其他变量 ④函数名可以当 ...
- linux之 sed命令
1. Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区 ...
- VC++6 调用teststand api的方法
参考example中的vs2010的例子,创建MFC工程 打开project->setting ,c/c++ tab cat 选 Proprocessor ->Additional in ...
- MatConvNet中关于vl_simplenn_display的一些分析
一.关于各层data size的分析 layer1: floor((224-7)/2)+1=109 这里7是filter大小,2是stride layer4: floor((109+0+1-3)/2 ...
- tornado输入-get_query_argument()等 笔记
最外面的代码结构 import tornado.web import tornado.ioloop import tornado.options import tornado.httpserver f ...
- redis 如何查看所有的key
可以使用KEYS 命令 KEYS pattern 例如, 列出所有的key redis> keys * 列出匹配的key redis>keys apple* 1) apple1 2) ap ...
- mysql二进制日志详解
一.什么是二进制日志 二进制日志主要记录mysql数据库的变化,二进制日志包含所有更新了数据或者潜在更新了数据(如没有匹配到任何行的delete语句),语句以时间的形式保存,描述了数据的更改.二进制日 ...
- 关于SD-SDI,HD-SDI,3G-SDI行号的问题
关于SD-SDI,HD-SDI,3G-SDI行号的问题 1.资料来源 2.行号的插入信号 SD-SDI mode的信号不需要行号 HD-SDI,3G-SDI mode的信号必须插入行号 3.edh的插 ...
- excel技巧--多行排成单列
要将上图的多行排成单列的效果,做法如下: 1.在倒数第二列的下方单元格,写入=号,然后再点击倒数第一列第一个单元格.这样复制该单元格的公式. 2.然后对着这个复制好的单元格的右下角一直往下拖拉,尽量拖 ...