美文网首页
vue1.0与2.0的区别

vue1.0与2.0的区别

作者: comingzy | 来源:发表于2017-10-02 17:54 被阅读0次

1.在绑定原生HTML时
1.0
<span>{{{message}}}</span>
2.0
<span v-html="message"></span>

2.在标签里的属性中
1.0
<span id="{{message}}"></span>
2.0
<span v-bind:id="message"></span>

3.2.0
filters只能在{{message|filter}}里使用,弃用了在指令里使用过滤器的用法,要实现相同的效果,需要在计算属性上实现。

4.2.0
对于原生事件要加修饰符native <button @click.native="handleClick"> 点击触发 handleClick </button>

5.2.0
生命周期里删除了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"> </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() } })

相关文章

  • vue1.0与vue2.0路由的区别

    个人总结——vue1.0与vue2.0路由的区别 vue1.0 html部分———— 主页 跳转链接 ...

  • vue2.0与vue1.0中的区别1

    vue2.0与vue1.0中的区别1:每个组件模板中不在支持片段代码 在vue1.0 中的模板template中可...

  • vue1.0与2.0的区别

    1.在绑定原生HTML时1.0 {{{message}}} 2.0 2.在标签里的属性中1.0 2.0 3.2....

  • vue1.0与2.0的区别

    本文的意义在于总结一些因为版本的更迭导致比较常见的地方引起错误,具体说明可以参考vue官网 目录 1、组件模板写法...

  • VUE的学习笔记

    vue和react的区别。 vue1.0是双向绑定的,vue2.0是单向绑定的,v-model是一个语法糖。rea...

  • vue生命周期和钩子函数

    vue1.0与2.x的区别: 这个运行中的html可以充分解释如上问题:

  • vue+webpack解析vue页面,一切从最简单开始

    这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档vue2.0 http://vuefe.cn/gui...

  • VUE父子模版传值,组件传值

    这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档vue2.0 http://vuefe.cn/gui...

  • vue1.0与2.0区别之生命周期

    在vue的1.0版本中生命周期有如下七个,分别是:init(组件初始化)、created(组件创建)、before...

  • 开始接触vue是看的vue1.0的文档,后面发现2.0的也早出来了,就直接开始学习vue2.0了。在实践项目之前,...

网友评论

      本文标题:vue1.0与2.0的区别

      本文链接:https://www.haomeiwen.com/subject/bxjbextx.html