vue1.0 v html,vue1.0和vue2.0区别（一）

绑定一次

{{*msg}}

{{msg}}

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

绑定html代码

{{{msg}}}

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

循环v-for

数组

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

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

data:{

arr:['苹果','橘子','香蕉']

}

• {{value}} {{$index}}

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

对象

data:{

json:{name:'zfpx'}

}

{{value}}

{{$key}}和{{$index}}vue2.0已废弃

对象数组都可以进行解构赋值

v-for = '(val,index) in arr'

// 2.0 必须进行定义，不然会报错

事件v-on

按钮

• {{value}}

var vue = new Vue({

el:'#box',

data:{

json:['香蕉','苹果','橘子']

},

methods:{

addFruit(event){

this.json.push('苹果');

}

}

});

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

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

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

显示/隐藏

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

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