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 + ...
随机推荐
- dojo/dom-style样式操作学习笔记
基础总结 一个元素的样式信息由三个来源根据层叠规则确定.三个来源分别是: 由DOM元素style特性设置的内联样式 由style元素中嵌入的样式规则 由link元素引入的外部样式表 元素的样式 任何支 ...
- 补充 作业八:团队项目——Alpha阶段项目总结 补充
游戏界面: 单一.无背景图片 加入了背景 游戏结束: 无变化 无变化 游戏记录 无 加入数据库:有数据记录! 游戏初始化: 无 加入多种模式 此次任务后的总结: 经过上一次的答辩,以及认真观看了其他组 ...
- [译]最长回文子串(Longest Palindromic Substring) Part I
[译]最长回文子串(Longest Palindromic Substring) Part I 英文原文链接在(http://leetcode.com/2011/11/longest-palindro ...
- 远程调试 Azure Web App
当我们将 Web App 部署在 Azure 上时,如果能够实现远程调试,将会极大的提高我们修复 bug 的效率.Visual Studio 一贯以功能强大.易用著称,当然可以实现基于 Azure 应 ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CentOS 6.6下Redis安装配置记录
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/120.html?1455855209 在先前的文章中介绍过redis,以下 ...
- 缓存篇~第六回 Microsoft.Practices.EnterpriseLibrary.Caching实现基于方法签名的数据集缓存
返回目录 这一讲中主要是说EnterpriseLibrary企业级架构里的caching组件,它主要实现了项目缓存功能,它支持四种持久化方式,内存,文件,数据库和自定义,对于持久化不是今天讨论的重要, ...
- Node.js入门:Node.js&NPM的安装与配置
Node.js安装与配置 Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0. ...
- css自适应宽高等腰梯形
t1是梯形, ct是梯形里面的内容. 梯形的高度会随着内容的高度撑高.宽度随着浏览器窗口变宽. 梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改. <div class=&quo ...
- rabbitmq消息队列——"工作队列"
二."工作队列" 在第一节中我们发送接收消息直接从队列中进行.这节中我们会创建一个工作队列来分发处理多个工作者中的耗时性任务. 工作队列主要是为了避免进行一些必须同步等待的资源密集 ...