vue2.0和1.0版本的区别

来源是：http://www.zhimengzhe.com/Javascriptjiaocheng/322993.html

1、绑定一次

code

1 2	<code>{{*msg}} <div v-once="">{{msg}}</div></code>

vue2.0已废弃 请使用v-once

2、绑定html代码

{{{msg}}}

{{{msg}}}写法vue2.0已废弃,请使用v-html

 

3、循环v-for 数组

1.0默认通过value进行遍历(key,value),遍历需加track-by="$index"(不加重复数据不绑定)

2.0通过key进行遍历(value,key)

code

1 2 3 4 5 6 7 8

<code>data:{   arr:['苹果','橘子','香蕉'] } <ul>   <li v-for="value in arr">       {{value}} {{$index}}   </li> </ul></code>

{{{$index}}}写法vue2.0已废弃

4、对象

code

1 2 3 4 5 6

<code>data:{     json:{name:'zfpx'} } <li v-for="value in json">     {{value}} </li></code>

{{$key}}和{{$index}}vue2.0已废弃
5、对象数组都可以进行解构赋值

code

1 2	<code>  v-for = '(val,index) in arr' // 2.0 必须进行定义，不然会报错</code>

6、事件v-on

code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<code><button v-on:click="addFruit($event)">按钮</button> <ul>     <li v-for="value in json">        {{value}}     </li> </ul> var vue = new Vue({     el:'#box',     data:{         json:['香蕉','苹果','橘子']     },     methods:{         addFruit(event){             this.json.push('苹果');         }     } });</code>

v-on:click简写@click 2.0支持

执行方法时加上()事件源默认不传递，需要手动传入$event

methods中的this永远指向Vue的实例

7、显示/隐藏

v-show 如果为false时通过css样式将元素隐藏 (display:none/block)

code

1	<code><div v-show="false"></div></code>

8、v-if 如果为false时移除DOM节点(removeChild)

code

1	<code><div v-if="false"></div></code>

以上就是对vue1.0和vue2.0区别（一）的相关介绍，希望对您学习javascript有所帮助，感谢您关注织梦者!