38elements.github.io - Vue.jsメモ

Vue.jsメモ

38elements.github.io Spined HTML

Vue.jsメモ Vue.jsメモ 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 * Vue.component(tagName, options) templateにはidを指定することができる Vueコンストラクタのcomponentsキーに登録する ul, ol, table, selectの子要素に設置するときはisを使用する dataは基本関数にする * コンポーネントの親子間はisolated telescopic 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メモ ≪Python Github Star Ranking at 2017/01/09 Main Go Github Star Ranking at 2016/12/17≫