Vue Basic Use

Vue 學習筆記(部分有與react類似API的比較)

索引index

v-bind

v-for

v-if, v-else-if, v-else

v-model

ref

<transition>

<transition-group>

<keep-alive> & <component :is=”” >

<slot >

v-bind

bind data to component

vue v-bind

v-for

Write a list with v-for

vue v-for — Write a list

v-if , v-else-if, v-else

render if true

vue v-if —render if true

v-model

Bind component value and onInput

vue v-model — bind data

ref

Get component DOM or vue instance

ref in normal component(e.g. <p></p>): DOM node
ref in custom component: vue instance

dom ref

custom component ref

component & keep-alive

選擇性的渲染組件及保存「沈睡」的組件狀態

vue <keep-alive> & <component :is>

transition

transition className generator

在"單一component"v-if 渲染前後 / <component>渲染前後 /v-show 顯示前後，加入entering/leaving相關的 classname，因此動畫只要將你想要的特效放在相關style中即可

props { 
  name: string 
  mode?: string 
  ...其餘props詳見這裡
}

transition-group

transition all components

在<transition-group></transition-group>中的components在更新後(新增或刪除…等)，會跟transition一樣，加上entering/leaving相關的 classname

props { 
  ...transition props except mode //除了mode以外，其他跟transition一樣
  tag: string //預設為span，包裹在最外層的wrapper tag
}

slot

dig a hole for component

預留位置給component塞進去，可自訂slot名稱

Vue Slot

引用/參考，延伸閱讀

vue api: https://vuejs.org/v2/api/
transition: https://vuejs.org/v2/guide/transitions.html