前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习。


       组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:

Vue1.0:

<template>
  <h3>h3标签</h3>
  <p>p标签</p>
</template>

Vue2.0:  

<template>
<div>
<h3>h3标签</h3>
<p>p标签</p>
</div>
</template>

关于组件的定义

Vue1.0:

Vue.component(组件名称,{  //vue2.0能用,但不再那么用了。
//组件内容
})

Vue2.0:

var home={
template:' ' //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
}

      生命周期 

Vue1.0:

  • init  ×废弃
  • created
  • beforeCompile  ×废弃
  • compiled  ×废弃
  • ready  ×废弃
  • beforeDestroy
  • destroyed

Vue2.0:

  • beforeCreate   组件实例刚刚被创建,属性都没有
  • created         组件实例创建完毕,属性已经绑定
  • beforeMount    模板编译之前  √新增
  • mounted       模板编译之后,代替了之前的ready*  √新增
  • beforeUpdate   组件更新之前  √新增
  • updated       组件更新完毕  √新增
  • beforeDestroy   组件销毁之前
  • destroyed        组件销毁后

 循环

Vue1.0:

v-for="(index,val) in array"

需要 track-by="$index" 属性解决添加重复数据问题。

Vue2.0:

v-for="(val,index) in array"

默认可以添加重复数据,必须用:key="index"属性提高循环性能,对功能没有影响。  

      自定义键盘事件(以ctrl键为例)

Vue1.0:

Vue.directive("on").keyCodes.ctrl = 17; 

Vue2.0: 

Vue.config.keyCodes.ctrl = 17;

      过滤器

Vue1.0:

  • 有很多系统自带过滤器,如:{{msg|json}}{{msg|currency}}

Vue2.0:

  • 内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决

组件通信

Vue1.0:

  • 子组件利用 sync (eg: :msg.sync="change") 可以更改父组件信息

Vue2.0:

  • 子级想拿到父级的数据:通过props,且不允许更改父组件信息
  • 如何改:
  1. 父组件每次传一个对象给子组件,对象引用。
  2. 只是追求不报错,可以用mounted的钩子函数,改变自身数据

      可以单一事件管理组件通信

var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名',function(){ ... }.bind(this));

      动画 

transition 不再是属性:transition=“fade”
而是像模板一样的标签

<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>

      路由 

  • link 不再是指令,而是标签

Vue1.0: 

<a v-link="{path:'/home'}">我是主页</a>

Vue2.0:

<router-link to="/home">我是主页</router-link>
  • 路由嵌套

Vue1.0:

var Home ={      //准备组件
  template:'<h3>我是主页</h3>'
}
const routes = [ //配置路由
  {path:'/home',component:Home},
  {path:'*',redirect:'/home'} //重定向
  ...
];
const router = new VueRouter({routes:routes}); //生成路由实例
//简写成对象的形式 :const router = new VueRouter({routes});
new Vue({ //最后挂到vue上
router,
  el:'#box'
});

Vue2.0:  

const routes = [   //配置路由
  {path:'/home',component:Home},
  {path:'/news',component:News,
    children:[
      {path:'/newsname',component:newsNameDetail},
      ...
    ]
 },
 {path:'*',redirect:'/home'} //重定向
   ...
];

      绑定原生html

Vue1.0:

<span>{{{message}}}</span>   //弃用

Vue2.0:

<span v-html="message"></span>

绑定标签属性

Vue1.0:

<span id="{{message}}"></span>  //弃用

Vue2.0:

<span v-bind:id="message"></span>

      Vue2.0其它改变的地方

  • el 属性绑定的元素,限制为一个普通元素,不能再绑定在body、html等元素上
  • v-model 增加了 .trim.number 等后缀修饰符
    <input v-model.trim="msg">
    
  • 增加了directives 属性自定义指令,也可以定义全局的指令

【重点突破】—— Vue1.0到Vue2.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. vue1.0 与 Vue2.0的一些区别 及用法

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

  6. Vue1.x 到Vue2.0的一个变化

    小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说  进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码  组件中模板: 之前:     <templa ...

  7. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  8. 用webpack2.0构建vue2.0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

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

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

随机推荐

  1. sqlserver 操作access数据库

    exec sp_configure 'show advanced options',1  reconfigure  exec sp_configure 'Ad Hoc Distributed Quer ...

  2. maven学习(八)——使用maven创建javaweb项目

    构建JavaWeb项目 1.创建JavaWeb项目 1.使用mvn archetype:generate命令,如下所示: mvn archetype:generate -DgroupId=com.my ...

  3. 错误:支持“EFDbContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId

    支持"EFDbContext"上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/ ...

  4. 【Luogu】P4159迷路(矩阵优化)

    题目链接 将每个点拆成时刻1~9,然后根据题目要求连边,比如i-j有一条权为x的边就从点i-x向点j-1连一条边,表示经过x次之后可以到达. 然后就矩阵快速幂乱搞就好了. #include<cs ...

  5. 记一次 pip list --outdated 错误

    在 Windows CMD 执行 pip list --outdated,出现如下错误:" [WinError 10061] 由于目标计算机积极拒绝,无法连接",原因是我之前用的源 ...

  6. windows系统——U 盘损坏修复

    u盘损坏怎么修复 1.打开控制面板——管理工具——计算机管理——存储——磁盘管理——右击“磁盘1”——点击“初始化磁盘”——“确定”——初始化完毕后,U盘为“联机”状态. 2.在右边空白处“新建磁盘分 ...

  7. vue基础教程

    1.执行npm install 2.安装stylus,(npm install之后node_module已经有了stylus,但还是要再安装一次) npm install --save-dev sty ...

  8. shell for 循环实践

    for循环语法结构如下 [root@backup tmp]# .sh #!/bin/bash ` do echo $i done [root@backup tmp]# .sh 3 批量修改文件名 [r ...

  9. js 如何刷新页面

    Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...

  10. jsp导出table数据excel表

    <html> <head> <meta http-equiv="content-Type" content="text/html;chars ...