v-for

寫在 html tag 裡面跑回圈，可設定 key

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-show

可以傳遞 true、false 值，讓元素顯示或隱藏

<h1 v-show="ok">Hello!</h1>

v-bind

可以用來傳遞 attributes、prop

傳遞 attributes (src、id、class...)時，可寫成 v-bind:src="" 或是簡寫成 :src=""

<!-- 一般寫法 -->
<div v-bind:class="success"></div>

<!-- 簡寫寫法 -->
<div :class="success"></div>

v-model

可以用在 input、select、textarea 的雙向綁定

在 input 輸入的東西可以同步

<input v-model="message" />
<p>Message is: {{ message }}</p>

v-on

跟事件有關指令，v-on:click="" 可以簡寫 @click=""

<!-- 一般寫法 -->
<button v-on:click="doThis"></button>

<!-- 簡寫寫法 -->
<button @click="doThis"></button>

scoped

可以寫在 style tag，寫在這裡的 css 僅限於這個 component，不會影響到其他的 component

<style scoped>

參考資料:
https://vuejs.org/guide/introduction.html