template 模板标签 及 @click

Question

请问下这里用template的作用是什么？为什么这样写？
还有第二张图的click属性前面加个@的作用是什么 ？

Answer 1

template

你可以把它想成是一個容器，例如我現在想 v-for 渲染兩個組件，所以必須要這樣做：

<div v-for="item in items">
  <component-a></component-b>
  <component-b></component-b>
</div>

一定要有個父元素包住才能達成，但是這又很惱人，我根本不需要多出一個 div 來，這時候就可以用 template，替代父元素

<template v-for="item in items">
  <component-a></component-b>
  <component-b></component-b>
</template>

編譯完後的結果就會：

  <component-a></component-b>
  <component-b></component-b>
  <component-a></component-b>
  <component-b></component-b>

不會多出一層。

@click

只是一個方便的語法糖，像是：
v-bind:value = :value
v-on:click = @click