# Vue

v-bind

v-on

v-model

Computed properties

v-if, v-else-if

v-show

v-for

## Vue component

// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

組件是可複用的 Vue 實例，且帶有一個名字：在這個例子中是 `<button-counter>`。我們可以在一個通過 `new Vue` 創建的 Vue 根實例中，把這個組件作為自定義元素來使用：

// HTML
<div id="components-demo">
  <button-counter></button-counter>
</div>

// JS
new Vue({ el: '#components-demo' })

### `data` 必須是一個函數

參考：[組件基礎](https://cn.vuejs.org/v2/guide/components.html)

### Refs
[訪問子組件實例或子元素](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)

### Component CSS (scoped)

### props

### Primitive vs Reference Types

### Events
$emit, $event

### Event bus
[Event Bus 是什麼? 怎麼用?](https://medium.com/itsems-frontend/vue-event-bus-15b76f27aeb9)

### Lifecycle hooks

### Slots

### Dynamic components
*App.vue*

<keep-alive> 標籤使舊有的表格輸入值在切換表格回來後依然存在

<template>
  <div>
    <keep-alive>
      <component v-bind:is="component"></component>
    </keep-alive>
    <button v-on:click="component = 'form-one'">Show form one</button>
    <button v-on:click="component = 'form-two'">Show form two</button>
  </div>
</template>

<script>
import formOne from './components/formOne.vue';
import formTwo from './components/formTwo.vue';

export default {
  components: {
    'form-one': formOne,
    'form-two': formTwo
  },
  data() {
    return {
      component: 'form-two'
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

### Input binding
用到 v-model 雙向綁定
v-model.**lazy**: 輸入的東西不會即時出現，會等跳脫此欄位才會出現

### HTTP Requests
使用 [vue-resource](https://github.com/pagekit/vue-resource)

### Custom Directives
v-theme(:*arg*)

### Filters

### Custom Search Filter
v-model, computed properties, match()
**Notice**: match() is case sensitive!

### Registering Things Locally

### Mixins
[Mixins](https://cythilya.github.io/2017/09/24/vue-mixins/)、[用 Mixin 來共用方法](https://medium.com/itsems-frontend/vue-mixin-1cb62198e089)

### Setting up Routing
new VueRouter

### Hash vs History (Routing)

### Adding Router Links
`<router-link>` 中要加 `exact`

### Route Parameters

### Vue.nextTick 的原理和用途
* 用法:
在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。

###### tags: `Vue`