VUE2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急。然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本。马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了。看了下vue2.0的英文的英文文档,发现相对于vue1.0有很多变化,而且变化不是一般的大。。。。如果一旦项目要升级到vue2.0,那么很多页面要整改,很多组件都不能用了,所以目前的项目打死不能升级。可以通过vue init webpack-simple#1.0安装基于vue1.0版本的vue-cli。
下边来分析下vue2.0几个重要的与自己目前项目相关的变化,纯粹是个人理解,权当了解.
详细变化请见官方文档分析https://github.com/vuejs/vue/issues/2873
vue2.0中文官方文档已发布:http://vuefe.cn/guide/
1.目前的项目几乎每个页面都用到了1.0的ready钩子函数,然而2.0已废弃不用,进而使用mounted替换,同时还新增了beforeMount、beforeUpdate、updated等,私以为越来越向react看齐了有木有。。
beforeUpdate的作用是在页面初始渲染视图之后,一旦监测到data发生变化,在变化的数据重新渲染视图之前会触发beforeUpdated钩子函数,这也是重新渲染之前最后修改数据的机会
update的作用则是在data发生变化渲染更新视图之后触发。
2.同时废弃的还有events、$dispatch、$broadcast,官方推荐使用vuex或者全局的事件驱动,然而废弃的这些方法在vux UI框架中很多地方都有使用,无疑在项目中用到它的地方在2.0版本都会不起作用,甚至会报错。
3.v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记,然后通过this.$refs获取
例如<p ref="a"></p> 获取方法为this.$refs.a 对于自定义组件同样适用
4.$els 是用来获取元素DOM对象,这个也废弃不用,$refs可以起到替代性作用。
5.v-for循环中常用的$index、$key也已不支持使用,trackby被key属性替换。
6.自定义组件中的partial,弃用,这个一直没用到
7.新增 v-once指令
8.新增 propsData
9.新增 render
VUE2.0不可忽视的很多变化的更多相关文章
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- Vue2.0实现1.0的搜索过滤器功能
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <bod ...
- vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...
- Vue2.0以后,有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- [.net 面向对象编程基础] (5) 基础中的基础——变量和常量
[.net面向对象编程基础] (5) 基础中的基础——变量和常量 1.常量:在编译时其值能够确定,并且程序运行过程中值不发生变化的量. 通俗来说,就是定义一个不能改变值的量.既然不能变动值,那就必须 ...
- 谈谈javascript语法里一些难点问题(一)
1) 引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe() { window.alert(a); var a = ...
- 用canvas开发H5游戏小记
自神经猫风波之后,微信中的各种小游戏如雨后春笋般目不暇接,这种低成本,高效传播的案例很是受开发者青睐.作为一名前端,随手写个这样的小游戏出来应该算是必备技能吧.恰逢中秋节,部门决定上线一个小游戏,在微 ...
- [蓝牙] 5、Battery Service module
Detailed Description This module implements the Battery Service with the Battery Level characteristi ...
- js模版引擎handlebars.js实用教程——关于HTML编码
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- [译]C++, Java和C#的编译过程解析
1.1.1 摘要 我们知道计算机不能直接理解高级语言,它只能理解机器语言,所以我们必须要把高级语言翻译成机器语言,这样计算机才能执行高级语言编写的程序,在接下来的博文中,我们将介绍非托管和托管语音的编 ...
- as3commons-bytecode 获取所有类的一个BUG
下载了这个swc,号称可以反射出所有加载的类.已经用在了spring. 可是一运行就报错,说bytearray.uncompress出错.操. 下载整个源码,单独加载as3commons-byteco ...
- iOS给图片添加滤镜&使用openGLES动态渲染图片
给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIF ...
- iOS开发——网络使用技术OC篇&网络爬虫-使用正则表达式抓取网络数据
网络爬虫-使用正则表达式抓取网络数据 关于网络数据抓取不仅仅在iOS开发中有,其他开发中也有,也叫网络爬虫,大致分为两种方式实现 1:正则表达 2:利用其他语言的工具包:java/Python 先来看 ...
- js相册展示
自己写来用的,第一版草稿源码+效果图,功能优先,其他的再说,有时间再改进. <script src="http://common.cnblogs.com/script/jquery.j ...