vue2.x与vue1.0一些插值和指令的比较
2017-12-28 本文已影响0人
落崖惊风yxy
1.单次插值
v1中单次插值语法{{*数据}}，v2不能使用
v2使用v-once指令
<body>
<div id="myapp">
<p @click="pclick()">{{msg}}</p>
<!-- 2.0版本不能使用单次插值语法{{*数据}} ，但是可以使用v-once指令-->
<!--2.0中使用语法{{*数据}} 报错-->
<!-- <p @click="pclick()">{{*msg}}</p> -->
<p @click="pclick()" v-once>{{msg}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#myapp",
data:{
rawHTML:'<span style="color:red">this should be red.</span>',
msg:"xixi"
},
methods:{
pclick:function(){
this.msg="haha"
}
}
})
</script>
</body>
2.html插值
v1中过滤html标签使用语法{{{数据}}}，v2不能使用
v2使用v-html指令
<p v-html="rawHTML"></p>
<!--v2中使用语法{{{数据}}}报错-->
<!-- <p>{{{rawHTML}}}</p> -->
3.关于表单的lazy
v1中，lazy 当表单失去焦点的时候，存储数据，相当于blur事件
语法示例：
<input type="text" lazy v-model="title">
<h1>{{title}}</h1
v2不支持这样使用，但是你可以给v-model加上修饰符.lazy，效果是一样的
<input type="text" v-model.lazy="title" >
