Document
API
Github
Example

created, destroyedはよく使う *
elに指定した要素はvm.$elでアクセスすることができる *
vm.$watch()ではアロー関数を使用しない
methodsに登録したものはthis.foo()で実行することができる
my-car => myCar *
v-cloakは描画が完了するまで属性として残る * example

Webpack

resolve.resolve.alias.vue$ = 'vue/dist/vue.esm.js'する

プラグイン *

Vueを使う処理

mixin *

値を置き換えるのではなく、結合するイメージ
dataは結合される。  　

ディレクティブ *

DOMを直接操作するような処理を記述する
値は展開される *

render関数 *

createElement()で動的にテンプレートを生成
vm.$slots

アニメーション *

<transition name="foo-bar">の場合、CSSのクラスはfoo-bar-enter-activeとかfoo-bar-leave-activeになる *

リアクティブの注意点 *  

• Vueコンストラクタのoption.dataはVueインスタンス生成時にsetter/getterを付与されるので
  新たにvm.foo = 1でプロパティを割り当てた場合はリアクティブにならない。
• リアクティブな属性はあらかじめoption.dataで宣言しておく *
• Vue.set(object, key, value)もしくはvm.$set(object, key, value)をしようすることでオブジェクトにリアクティブを持たせることができる。  
• arrayの注意点 *
• 複数の属性を割り当てる方法
  vm.foo = Object.assign({}, vm.foo, {apple: 1, orange: 2});
• 画面の描画が終わったときに処理を実行する際はVue.nextTick(callback)かvm.$nextTick(callback)を使う　*  
• 循環を防ぐために以下のような処理を使う

this.$refs.inputElem.foo = fooValue;

v-model *  

API
<input v-model=”foo”>は下記の構文糖衣

<input v-bind:value="foo" v-on:input="foo = $event.target.value">

画面がロードされた際のtextareaやinputの初期値はv-modelに入らない

v-bind  

API
要素の属性とdataを紐付ける

• v-bind:id="id"は:id="id"と同じ
• v-bind:class=’dataのキー名’  
• v-bind:class=’[dataのキー名, dataのキー名]’  
• コンポーネントに対してv-bind:classを適用するとroot要素に効果が適用される
• v-bind:styleはv-bind:classと同じように指定することができる
• v-bind:true-value, v-bind:false-valueはチェックボックスの状態によって束縛される値のvmの属性を指定する *
• v-bind:valueはRadioやSelectが選択された場合、束縛される値のvmの属性を指定する *
• v-bind:value=”{ foo: ‘bar’ }”が可能
• lazy,number,trim修飾詞がある
• dataのfoo属性の値をdisabledプロパティに割り当てる
  :disabled=”foo”
• <option :value=”item” v-for=”item in items”>{{item}}</option> *
• v-bindは値をjavaScriptとしてとるので文字列は'で囲む必要がある *
  

v-on *  

API   ハンドラの引数に$eventをセットしてeventのデータを取得する *
v-on:click="foo"は@click="foo"と同じ   下記のような修飾詞をセットすることができる  

<button v-on:click.stop.prevent.once="once">Once</button>

v-if *  

input要素など再利用されては困る要素にはkey属性を付与する

• v-else-if  

• v-else

v-show *

v-for *

<div v-for="user in users">foo</div>
<div v-for="(user, index) in users">foo</div>
<div v-for="(user, key) in users">foo</div>
<div v-for="i in 5">{{ i }}</div>

再描画のためにkeyを置く

v-html

v-onやv-modelに.preventをつけるとevent.preventDefault()が自動実行

watch

• ネストしたデータをwatchしたい場合はdeepを指定する *
  handler()の関数には子データがすべて入る

Components *

• propsに登録されていない属性はコンポーネントのroot要素に属性として付与される *
• Vue.component(tagName, options)
• templateにはidを指定することができる
• Vueコンストラクタのcomponentsキーに登録する
• ul, ol, table, selectの子要素に設置するときはisを使用する
• dataは基本関数にする *
• コンポーネントの親子間はisolated scope
• props down(親=>子)の一方通行
  渡された値がオブジェクトや配列の場合、子コンポーネントでの破壊的処理が親コンポーネントのデータに影響を与える
• events up(子=>親)   子から親へデータを渡すには.sync修飾子やv-modelを使用すると便利
  <input v-model=”foo”>は下記の構文糖衣

<input v-bind:value="foo" v-on:input="foo = $event.target.value">

• $on(), $emit()で子=>親 *  
• propsでテンプレートでの属性名を指定する *  
• 属性とv-bindの違い *
• propsのデータはdata,computedの関数内で取り扱う *
• propsは型チェック、デフォルト値、バリデーション、必須項目の設定を行うことができる *
• 親子間でのv-modelの使用方法 *
• 親テンプレートから子テンプレートへの文字列の埋め込みは<slot>を使う *
• 子テンプレートに埋め込まれた値を親テンプレートから使用するときはscoped slotを使う *  
• 1つの場所に配置するコンポーネントをswitchのように切り替える場合は<component>にis属性で指定する *
  切り替えられるコンポーネントを保持するには<keep-alive>を使う
• Vue.conponent()の第二引数に関数を指定することが可能です。この関数はPromiseを返すことができる。 *
• テンプレートはfoo-bar、componentsキーはfooBar *
• nameオプションを設定すればテンプレートに定義中のコンポーネント自身を書くことができる *
• HTMLを埋め込むだけならv-onceを使う *
• コンポーネントのテンプレートは1つのroot要素を持つ必要がある
• dataはネストすることができる
  v-model=”form.foo”
• propsの型がBooleanの場合、要素にプロパティ名があるだけでtrueになる
• this.$options.propsDataでコンポーネントの生成時にpropsに設定されているデータを取得することができる。
• this.$optionsで生成時のoptionsを取得することができる *
• 何かをラップしたコンポーネントを作成する際、destroyedでそれのインスタンスを削除することを忘れない
• this.$dataに現在のdataがある
• this.$refで子コンポーネントにアクセスすることができる

Vuexメモ
VueRouterメモ
axiosメモ
cheatsheet
vue-devtools
vuelidateメモ
vue-webpack-boilerplateメモ
Vue CLI 3メモ