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的坑的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  3. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  4. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  5. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  6. Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  7. vue踩坑之旅 -- computed watch

    vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...

  8. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  9. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  10. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

随机推荐

  1. SQLite数据库下载

    一:SQLite简介 SQLite是一种嵌入式数据库,它的数据库就是一个文件.体积很小,经常被集成到各种应用程序中,甚至在iOS和Android的App中都可以集成. 要操作关系数据库,首先需要连接到 ...

  2. MySQL--Semi-join(半连接)优化策略

    Semi-join(半连接)半连接主要场景:检查一个结果集(外表)的记录是否在另外一个结果集(字表)中存在匹配记录,半连接仅关注”子表是否存在匹配记录”,而并不考虑”子表存在多少条匹配记录”,半连接的 ...

  3. gravitee-gateway 又一个开源 apigateway

    gravitee-gateway 是Gravitee.io基于 java 开发的api gateway 功能很丰富,包含ui 界面 报警管理,访问控制管理,同时也包含一个比较完整的api 声明周期管理 ...

  4. Gravitational Teleport docker-compose简单运行

    Gravitational Teleport 可以作为堡垒机进行使用,为了测试方便使用docker-compose 运行一个all in one 的demo 备注: 官方提供的docker-compo ...

  5. 03C++语言对C的增强——实用性、变量检测、struct类型、C++中所有变量和函数都必须有类型、bool类型、三目运算符

    1.“实用性”增强 C语言中的变量都必须在作用域开始的位置定义,C++中更强调语言的“实用性”,所有的变量都可以在需要使用时再定义. 2.C++对c语言register的增强 register关键字 ...

  6. oracle-sql模式匹配

    下面是条件 like与regexp_like条件 下面是函数 regexp_instr regexp_replace regexp_substr select * from tis_ft_user_i ...

  7. Elasticsearch 学习资料

    Elasticsearch 学习资料 学习资料 网址 官方网站中文版 https://www.elastic.co/cn/ 全文搜索引擎 Elasticsearch 入门教程(阮一峰) http:// ...

  8. ulimit设置内存限制是否有效

    如何使用ulimit限制物理内存 限制物理内存 $ ulimit -m 512000 经测试,无效. 限制物理内存不起作用,ulimit不支持限制物理内存,可见man ulimit手册 -m The ...

  9. ubuntu16 安装matplotlib

    在安装ubuntu安装matplotlib时碰到不少问题,简单做个备忘: 需要先安装其依赖的包libpng和freetype 安装libpng: sudo apt-get install libpng ...

  10. CoreException: Could not get the value for parameter compilerId for plugin execution default-compile Maven项目pom文件报错,插件引用不到

    CoreException: Could not get the value for parameter compilerId for plugin execution default-compile ...