这段时间用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遇到的问题的更多相关文章

  1. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  2. Window环境下搭建Vue.js开发环境

    原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...

  3. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  4. 用Vue.js和Webpack开发Web在线钢琴

    缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...

  5. 在window下搭建Vue.Js开发环境

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org ...

  6. 在window下搭建Vue.Js开发环境(转)

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...

  7. 【vue.js】windows下安装vue.js

    windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...

  8. Vue.js - Day5 - Webpack

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...

  9. RAP、Mock.js、Vue.js、Webpack

    最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...

随机推荐

  1. php 判断文件/目录是否存的方法

    涉及函数 is_file(), is_dir() , file_exists() is_file() 判断文件是否存在 is_dir() 判断目录是否存在 file_exists() 既可用于判断文件 ...

  2. Hive的安装

    Hive的安装   第一步:解压并安装:第二步:配置 1)root用户下,解压后,改名为hive,并将hive文件夹赋给hadoop用户 tar -zxvf hive-0.9.0.tar.gz -C ...

  3. 登陆+注册(三层+sql语句)

    啰嗦:今天面试,遇到这个上级测试,很容易的,因为一个错误,居然最后没做出来,心累 回到家,1小时做完,我特么还加了密,我还验证,可是上天不给我一次重来的机会啊 很垃圾的,小白可以看看,大神可以轻喷 首 ...

  4. Get Intensity along a line based on OpenCV

    The interpolate function is used to get intensity of a point which is not on exactly a pixel. The co ...

  5. NSQ的消息订阅发布测试

    在测试NSQ的Quick Start发现这样一个问题,就是同时只能有一个订阅实例 $ nsq_to_file --topic=test --output- 当存在两个实例时则消息会被发送给其中的一个实 ...

  6. C语言 教学实践建议

    这是2016年秋季学期和北京工业大学耿丹学院合作教学的计划. 2016级有四个班,每班大约 32 人,每班配有一个有一定实际工作经验的助教,配合老师把课教好. C语言是一门基础课, 是耿丹学院新生的第 ...

  7. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  8. Badboy录制脚本参数化

    Jmeter录制脚本多采用Badboy工具 简单参数修改 第一步,先录制场景: a.开始录制,打开浏览器www.sogou.com b.在输入框中输入文字“Badboy" c.回车,关闭录制 ...

  9. [vivado系列]Zynq开发常用文档

    时间:2016.06.13 目的:阶段性总结学习的策略 ------------------------------------------------------------------------ ...

  10. HTML DOM Element

    HTML DOM Element(元素) 文档本身是文档节点 . 所有 HTML 元素是元素节点 . 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 . 注释是注释节点 . NODE ...