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的更多相关文章

  1. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  2. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  3. 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.变 ...

  4. vue1.0+vue2.0实现选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...

  5. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  6. vue1.0 与 Vue2.0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  7. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  8. vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

  9. 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统

    首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...

随机推荐

  1. linux命令学习之:echo

    echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下 ...

  2. C#中静态构造函数

    静态构造函数用于初始化任何静态数据,或执行仅需执行一次的特定操作. 将在创建第一个实例或引用任何静态成员之前自动调用静态构造函数. 静态构造函数的属性 1. 静态构造函数不使用访问修饰符或不具有参数. ...

  3. Python ctypes.windll.user32() Examples

    Example 1 Project: OSPTF   Author: xSploited   File: mouselogger.py View Source Project 7 votes def ...

  4. js generator

    generator(生成器)是ES6标准引入的新的数据类型.一个generator看上去像一个函数,但可以返回多次. generator跟函数很像,定义如下: function* foo(x) { y ...

  5. C#编译时,提示缺少NuGet包

    A--还原Nuget包前,一定要确保你配置了该项目的包源:如果你没有那就找别人要吧. 工具-选项-Nuget包管理器-程序包源 B--配置编译时自动还原缺少的nuget包: 工具-选项-Nuget包管 ...

  6. HTTP.ContentType

    1. multipart/x-mixed-replace http://blog.dubbelboer.com/2012/01/08/x-mixed-replace.html

  7. linux 使用笔记2

    安装chrome浏览器在Fedora 23 下载pub wget https://dl-ssl.google.com/linux/linux_signing_key.pub 安装pub sudo rp ...

  8. 电商类web原型制作分享——美丽说【附源文件】

    美丽说是国内白领女性时尚消费品牌,精选上千家优质卖家供应商,为用户提供女装.女鞋.女包.配饰.美妆等品类的优质时尚商品. 此原型模板所用到的组件有搜索框.下拉菜单.输入框.选项卡等.交互动作有切换选项 ...

  9. Two Sum LT1

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  10. servlet 高级知识之Listener

    Listener,顾名思义,监听器.它可以监听客户端的请求.服务端的操作等. 通过监听器,可以自动激发一些操作,比如监听在线的用户的数量.当增加一个HttpSession时,就激发sessionCre ...