Vue2.0-4 -指令v-bind 与 v-on 缩写

最新推荐文章于 2023-06-08 11:50:10 发布

孟烦了

最新推荐文章于 2023-06-08 11:50:10 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vuejs指令缩写

本文链接：https://blog.youkuaiyun.com/mengfanle666/article/details/62906162

Vue2 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue.js中常用的指令缩写语法，包括属性绑定和事件绑定的简化方式，通过示例展示了如何使用这些简化的语法来提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缩写语法：

Vue针对经常频繁使用的两个指令进行简化处理，并且预期以后会出现更多的缩写语法

            属性绑定的缩写： v-bind:属性名称  ==   :属性名称
            事件绑定的缩写： v-on:事件名称 == @事件名称

缩写的好处和缺点：

好处：简化开发，让技术人员在开发的过程中，对于频繁操作的指令进行了简化处理，提高了工作效率

<div id="app">
        <div v-bind:title="msg">好傲娇啊</div>
        <div :title="msg">好傲娇啊</div>
        <hr />
        <button v-on:click="count++">点击我增加</button><span>{{count}}</span>
        <button @click="count++">点击我增加</button><span>{{count}}</span>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"这是一条提示信息",
                    count:0

                }
        })
        </script>