为了账号安全,请及时绑定邮箱和手机立即绑定

vue2.0与1.0的改变对比总结

标签(空格分隔): vue2.0
  • 在绑定原生HTML时,弃用了原来的<span>{{{message}}}</span>,只保留了<span v-html="message"></span>的写法。
  • 在标签里的属性中,弃用了<span id="{{message}}"></span>的写法,只保留了<span v-bind:id="message"></span>
  • filters只能在{{message|filter}}里使用,弃用了在指令里使用过滤器的用法,要实现相同的效果,需要在计算属性上实现。
  • 对于原生事件要加修饰符native <button @click.native="handleClick">点击触发 handleClick</button>
  • 生命周期里删除了beforeCompile,compiled,ready,新增了beforeMount,mounted,beforUpdate,updated。
  • for循环里,取消了原有的$index,<div v-for="(item,index) in dataArr">需要改为ES6语法形式自己获取
  • el属性绑定的元素,限制为一个普通元素,不能再绑定在body、html等元素上。
  • 另一个特别喜欢的改变是,在自定义组件上绑定class后,对应的类名会传递到组件根元素上,如果存在同名的,则不会覆盖。这对设置组件样式非常有好处。
  • v-for 里的track-by被替换成了key,
    <div v-for="item in items" :key="item.id"> <!-- content --> </div>
  • v-model增加了.trim,.number等后缀修饰符<input v-model.trim="msg">
  • Custom events can also be used to create custom inputs that work with v-model. Remember:

    <input v-model="something">

    is just syntactic sugar for:

    <input v-bind:value="something" v-on:input="something = $event.target.value">

  • 原来的<div transition="enter"></div>改为了标签用法<transition name="enter" mode="out-in"><div></div></transition>,并且可以选择过渡时的动画模式。
  • 同时过渡多个元素时,使用transition-group标签
    <transition-group name="slide-fade" tag="div" appear> <div v-for="n in 5" key="n" >transitiongroup</div> </transition-group>,appear是标识在初始化的时候执行。
    另外,

Unlike <transition>, it renders an actual element: a <span> by default. You can change the element that’s rendered with the tag attribute.
Elements inside are always required to have a unique key attribute

  • 增加了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() } })

随着工作和学习中碰到的持续更新中···

基于vue和websocket的多人在线聊天室
基于react的gallery
XMLHttpRequest2的一些测试和实践
css3 制作3D色子并动画讲解原理

点击查看更多内容
43人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
42
获赞与收藏
398

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消