zoukankan      html  css  js  c++  java
  • 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() } })

     

  • 相关阅读:
    201521123004 《Java程序设计》第10周学习总结
    201521123004《Java程序设计》第9周学习总结
    201521123004《Java程序设计》第8周学习总结
    201521123004 《Java程序设计》第7周学习总结
    201521123004《Java程序设计》第6周学习总结
    201521123004《Java程序设计》第5周学习总结
    一个markdown的例子
    201521123004《Java程序设计》第4周学习总结
    201521123004 《Java程序设计》第3周学习总结
    Alpha阶段项目复审
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/6595702.html
Copyright © 2011-2022 走看看