关于VUE三个语法糖

• 一、冒号":”，是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>