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. Nginx:承受3万并发连接数,胜过Apache 10倍

    编者按:Nginx是目前比较重要的开源性负载均衡技术,新浪.网易.六间房等很多网站都将Nginx部署进自己的网站系统架构,并解决部分问题.本文是作者长期的实战经验,很有参考价值. 本文是我撰写的关于搭 ...

  2. oracle重做日志文件硬盘坏掉解决方法

    rman target/ list backup; list backup summary; 删除数据库数据文件夹下的log日志,例如/u01/app/oracle/oradata/ORCL下的所有后 ...

  3. 如何取消noarch.rpm包

    有一次部署zabbix服务器,不小心rpm -ivh zabbix的el7版本的rpm了,但是我的系统是centos6.5的,所以就尴尬了 rpm -ivh http://repo.zabbix.co ...

  4. HTTP redirect 重定向到 HTTPS

    最近帮一个顾客做网站,  需要HTTPS. 之前接触的SSL certificate直接上传到plesk 上面勾选重定向即可. 在此先吐槽下godaddy 服务贵功能还少. 用代码从HTTP来重定向到 ...

  5. webpack 4 学习资料

    webpack 4 学习资料 资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/ webpack 4 教程 https://s ...

  6. 使用 localeCompare 函数对中文进行排序

    localeCompare 函数可对中文进行排序. 性能相关 当比较大量字符串时, 比如比较大量数组时, 最好创建一个Intl.Collator 对象并使用compare 属性所提供的函数. mdn介 ...

  7. java 同步代码块与同步方法

    同步代码块 synchronized (obj) { // 代码块 } obj 为同步监视器,以上代码的含义为:线程开始执行同步代码块(中的代码)之前,必须先获得对同步监视器的锁定. 代码块中的代码是 ...

  8. java 迭代

    迭代器的作用是提供一种方法对一个容器对象中的各个元素进行访问,而又不暴露该对象容器的内部细节. java中的很多容器都实现了Iterable接口,容器中的元素都是可以遍历的. 如下例,list容器中存 ...

  9. FireDAC内部初探

    procedure TForm1.Button1Click(Sender: TObject); var FCommIntf: IFDPhysCommand; //FireDAC.Phys.Intf F ...

  10. pyhanlp用户自定义词典添加实例说明

    pyhanlp用户自定义词典添加实例说明 pyhanlp是python版封装的的HanLP,项目地址:https://github.com/hankcs/pyhanlp 经过测试,HanLP比nltk ...