总结下用Vue.js和webpack遇到的问题
这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下。
1.ES6匿名函数里面this值
结合webpack,使用Babel转换器,可以安心用ES6了,关于箭头函数(匿名函数)一个注意点:
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
开始不知道这个特性,还弱弱的用了bind()方法把this值传进去,弱爆了!这个特性真的是好用,妈妈再也不用担心我的this对象丢失了!
2.vue data为对象,并且属性是动态添加或删除时视图无法响应
受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
eg:
data(){
return{
lists: {}
}
}
this.lists[this.currentCate] = lists //这样赋值视图是不会更新的!
正确的是:
Vue.set(this.lists, this.currentCate, lists);
持续更新中。。。
总结下用Vue.js和webpack遇到的问题的更多相关文章
- Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下. 前言 随着 ...
- Window环境下搭建Vue.js开发环境
原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...
- Vue.js 在 webpack 脚手架中使用 cssnext
Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...
- 用Vue.js和Webpack开发Web在线钢琴
缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...
- 在window下搭建Vue.Js开发环境
nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org ...
- 在window下搭建Vue.Js开发环境(转)
nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...
- 【vue.js】windows下安装vue.js
windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...
- Vue.js - Day5 - Webpack
在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
随机推荐
- opencv嫁接vlfeat densesift
#include <opencv2/opencv.hpp> #include <iostream> extern "C" { #include <vl ...
- C# 异常:从作用域“”引用了“FiasHostApp.Entity.DBEntity.FIAS_RM_v1.ITraNetMgrUnitBaseInfoRecord”类型的变量“w”,但该变量未定义
C# 异常:从作用域“”引用了“FiasHostApp.Entity.DBEntity.FIAS_RM_v1.ITraNetMgrUnitBaseInfoRecord”类型的变量“w”,但该变量未定义 ...
- WPF 大数据加载过程中的等待效果——圆圈转动
大家肯定遇到过或将要遇到加载大数据的时候,如果出现长时间的空白等待,一般人的概念会是:难道卡死了? 作为一个懂技术的挨踢技术,即使你明知道数据量太大正在加载,但是假如看不到任何动静,自己觉得还是一种很 ...
- Python 多线程 Condition 的使用
Condition Condition(条件变量)通常与一个锁关联.需要在多个Contidion中共享一个锁时,可以传递一个Lock/RLock实例给构造方法,否则它将自己生成一个RLock实例. 可 ...
- 关于jQuery中环境配置中的问题
一开始无法显示出效果,配置和代码如 这代码本没有错 但是就是无法显示 原因是我下载了2.x版本的jQuery,jQuery2.x版本是不支持IE6/7/8的,也有很多主流的浏览器无法显示出效果,于是在 ...
- AJAX避免服务器调用上个页面缓存的办法
GET 请求 一个简单的 GET 请求: xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send(); 亲自 ...
- 用于模式匹配的String方法
String支持四种使用正则表达式的方法. 1.search()返回第一个与之匹配的子串的起始位置,找不到返回-1.search()参数是一个正则表达式,如果参数不是正则表达式,则会先通过RegExp ...
- ICMP Protocol
[ICMP Protocol] 参考: 1.ICMP Types and Codes:http://www.nthelp.com/icmp.html 2.RFC 792 - Internet Cont ...
- (转载)IE6支持透明PNG图片解决方案:DD_belatedPNG.js
DD_belatedPNG.js 是一个能是IE6支持p显示ng透明图片,而且还支持背景循环(background-repeat)和定位(backgrond-position) ,支持focus,Ho ...
- JavaScript学习(一)—处理事件
一.处理事件(一) 事件(event)是用户在访问页面时执行的操作.提交表单和在图像上移动鼠标就是两种事件.当浏览器探测到一个事件时,比如用鼠标单击或按键,它可以触发与这个事件相关联的JavaScri ...