vue2.x与vue1.0一些插值和指令的比较

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" >

https://cn.vuejs.org/v2/guide/forms.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,212评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,486评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,720评论 0 6
  • 俗话说:“女人四十豆腐渣,男人四十一朵花。”然而,小芙不认为这句话有道理,实际上无论是女人,还是男人,想要越老越吃...
    珠宝大课堂阅读 4,624评论 0 0
  • 岩井俊二 如果当初我勇敢,结局是不是不一样。如果当初你坚持,回忆会不会不一般。最终我还是没说,你还是忽略。 那是个...
    不会跑zw阅读 1,468评论 0 0

友情链接更多精彩内容