总结下用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);

持续更新中。。。

时间: 2024-12-29 06:57:56

总结下用Vue.js和webpack遇到的问题的相关文章

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

nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.10.3 npm -v  //显示npm包管理器版本 3.10.10 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm Cmd命令行中输入npm install -g cnpm --registry=http://re

vue.js+vue-router+webpack keep-alive用法

本文是机遇 提纲: 现有需求 各个解决方案的优缺点 相关的问题延伸 keep-alive使用详解 现有需求 每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页. 并且,点击表格中的某一列需要进行路由跳转进入到详情/添加/编辑页面. 比较好的用户体验就是,从详情/添加/编辑页面返回之后希望列表页保留上次离开时的筛选条件和页码.但是正常情况下路由跳转之后实例已经被销毁. 可选的解决方案 1.保留状态数据: 利用state存储状态,如筛选的品牌,时间范围,分页.在路由跳转到详情/添

vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)

2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2.下载并安装node.js(一直next即可) 安装完成之后在终端输入:node -v和npm -v查看是否安装成功.npm是node.js的包管理工具. 3.这里我们可以更改node.js默认下载依赖的位置 在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_g

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器. Vue.js安装 安装方式有两种: 1.直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告) 2.使用cdn方法引入 3.npm安装 npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs 附上一小段nvm使用的命令: $ n

用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能,直接初體驗vue.js + firebase + webpack三種願望一次滿足XD! update: 20170923更新[用 Vue.js + Firebase 製作即時聊天功能(2) - storage](https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/) >DEMO< >原始碼-GitHub< 這幾天想

从Vue.js窥探前端行业

近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大部分浏览器是基于webkit内核,所以ES5在移动端也是全面支持的,因此vue可以在移动端以及现代浏览器中大显身手. 2.前端交互越来越多,功能越来越复杂: 现在的前端可谓是包罗万象,比如高大上的技术库和框架.酷炫的运营活动页面.H5小游戏,当然前端技术的应用在更多具有商业价值的应用上,比如下图.

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

vue.js在windows10系统下的环境搭建

vue.js在windows10系统下的环境搭建流程 1.安装node.js(node包含了npm包管理器) node.js安装包以及源码下载地址:https://nodejs.org/en/download/ 注意:使用安装包(.msi)(作为小白的我,直接用了.exe,导致环境变量都不会自动配置,真的挺郁闷的) 下载下来以后可以直接双击安装,按照提示一步步安装. 详细的安装步骤可看网址:http://www.runoob.com/nodejs/nodejs-install-setup.htm