- 一、冒号":”,是v-bind的缩写,表示标签的属性值取vue的数据属性值
-
<a :href='url'>中华人民共和国</a> <a v-bind:href='url'>中华人民共和国</a>
二、@符号,是v-on指令的缩写,表示触发事件
<button @click="handleClick">中华人民共和国</a> <a v-on:click='handleClick'>中华人民共和国</a>
三、#符号,是在使用vue组件的插槽时的v-slot缩写 -
//假如组件<base-layout>定义中使用了具名插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> //我们使用组件的时候就需要如下写法: <base-layout> <template v-slot:header> <h1>生活</h1> </template> <template v-slot:default> <p>学习</p> <p>www.baidu.com</p> </template> <template v-slot:footer> <p>教育</p> </template> </base-layout> //我们可以使用#,如下: <base-layout> <template #header> <h1>汽车</h1> </template> <template #default> <p>用品</p> <p>www.wanmait.com</p> </template> <template #footer> <p>服务</p> </template> </base-layout>
关于VUE三个语法糖
于 2023-03-07 08:49:49 首次发布