vue2.x和vue1.0
1、首先挂载方式上 在vue2.0中，如果使用body或者html作为挂载点，则会报以下警告：
Do not mount Vue to <html> or <body> - mount to normal elements instead.
在vue1.0中允许开发者以body或者html作为根实体的挂载点，但是到了2.0后，只能通过独立的节点挂载，例如：div等，否则报警告
2、在绑定原生HTML时，弃用了原来的<span>{{{message}}}</span>，只保留了<span v-html="message"></span>的写法
3、在标签里的属性中，弃用了<span id="{{message}}"></span>的写法,只保留了<span v-bind:id="message"></span>
4、filters只能在{{message|filter}}里使用，弃用了在指令里使用过滤器的用法，要实现相同的效果，需要在计算属性上实现
5、对于原生事件要加修饰符native <button @click.native="handleClick">点击触发 handleClick</button>
6、对于原生事件要加修饰符native <button @click.native="handleClick">点击触发 handleClick</button>
7、生命周期里删除了beforeCompile,compiled,ready,新增了beforeMount,mounted,beforUpdate,updated。
8、for循环里，取消了原有的$index，<div v-for="(item,index) in dataArr">需要改为ES6语法形式自己获取
9、el属性绑定的元素，限制为一个普通元素，不能再绑定在body、html等元素上。
10、在自定义组件上绑定class后，对应的类名会传递到组件根元素上，如果存在同名的，则不会覆盖。这对设置组件样式非常有好处。
11、v-for 里的track-by被替换成了key,<div v-for="item in items" :key="item.id"> <!-- content --> </div>
12、v-model增加了.trim,.number等后缀修饰符<input v-model.trim="msg">
13、自定义事件也可以用来创建自定义输入用v-model.
<input v-model="something">
语法糖:
<input v-bind:value="something" v-on:input="something = $event.target.value">
14、原来的<div transition="enter"></div>改为了标签用法<transition name="enter" mode="out-in"><div></div></transition>,并且可以选择过渡时的动画模式。
15、同时过渡多个元素时，使用transition-group标签<transition-group name="slide-fade" tag="div" appear> <div v-for="n in 5" key="n" >transitiongroup</div> </transition-group>，appear是标识在初始化的时候执行。
在使用
<transition-group>时候，不仅可以定义进入离开动画，还可以使用新增的v-move特性，与过渡一样，默认为v-move，可以用name进行自定义前缀，也可以用move-class属性手动设定。用了这个之后就可以实现移动过程中的动画。
16、增加了directives属性自定义指令，也可以定义全局的指令：// Register a global custom directive called v-focus Vue.directive('focus', { // When the bound element is inserted into the DOM... inserted: function (el) { // Focus the element el.focus() } })
vue2.x和vue1.0的更多相关文章
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- vue1.0与vue2.0对于v-for的使用的区别
vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...
- vue1.0＋vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue使用中遇到的，以及vue1.0到vue2.0新手踩的坑
最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
随机推荐
- linux服务器搭建
centos7 java web项目环境搭配 2018年07月19日 17:20:21 阅读数:25 首先进行系统安装,此处不进行详细介绍,自行百度安装 一.配置ip地址信息 1.进入/etc/sys ...
- java_12多态
1多态概述 多态是继封装.继承之后,面向对象的第三大特性. 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学生也是人,即出现两种形态. Java作为面向对象的语言,同样 ...
- 先安装win7时IIS的安装
打开“控制面板”->选择“程序”->选择“打开或关闭windows功能”->在“Internet信息服务”中勾选以下勾选框
- WorkerMan源码分析 - 实现最简单的原型
之前一直认为workerman源码理解起很复杂,这段时间花了3个下午研究,其实只要理解 php如何守护化进程.信号.多进程.libevent扩展使用,对于如何实现就比较轻松了. 相关代码都在githu ...
- php中时间转换函数
date("Y-m-d H:i",$unixtime) 1.php中获得今天零点的时间戳 要获得零点的unix时间戳,可以使用 $todaytime=strtotime(“tod ...
- Repeater控件添加序号列
在项目开发过程中,会经常遇到ASP.NET repeater控件添加序号列,有些新手可能还不会,网上搜集整理了一些,需要的朋友可以参考下 ASP.NET repeater添加序号列的方法 1.< ...
- tomcat/eclipse提速[z]
在使用Eclipse开发项目过程中,一度使Eclipse陷入瘫痪状态,Tomcat启动项目时也异常缓慢,增加了超时限制并没有用,有时候项目根本运行不起来,简直让人崩溃,可能我电脑内存小(4G),配置低 ...
- qrcodenet二维码图片下扩展区域添加号段的操作
总监安排了个任务,一个号码导出一个二维码图, 我实现了最终还能批量生成,结果主管说要在图片下边添加一行,和图片是一起的 最开始把控件的上的图给改了,结果保存起来没用,控件上的图跟要保存的不是一个事. ...
- opencv中imread第二个参数的意义
文档中是这么写的: Flags specifying the color type of a loaded image: CV_LOAD_IMAGE_ANYDEPTH - If set, return ...
- linux查看文件被哪个进程占用？
1> 如果文件是端口号 netstat -ntlp | grep portNum [root@localhost root]# netstat -ntlp Active Internet con ...