院卒新人サラリーマンのメモ代わり

備忘としてのメモを記載

2018-07-07から1日間の記事一覧

vue.jsにてモーダルの実装

cssでのハンガーバーメニューと考え方はほぼ同じだが、実装がだいぶ楽。 ついでにbulma(cssフレームワーク)も使えばレイアウトも簡単。 というかbulmaのモーダルのドキュメントに@clickイベントいくつか付けるだけでできる。 (vueの方でmodalプロパティも必…

切り替えタブ

切り替えタブ | 基礎から学ぶ Vue.js を読んでいて詰まったこと(本は買って読みました) <TabItem v-for="item in list" v-bind="item" :key="item.id" v-model="currentId"/> v-model カスタムコンポーネントを一つの入力フォームのように使える v-bind 引数を省略するとオブジェクトを渡せるv-bindに関してはオブジェクト名を属性として渡し</tabitem>…

v-modelはシンタックスシュガー

<input v-model="searchText"> ってやるとデータバインディングしてくれる これは以下の構文のシンタックスシュガー <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > inputがあるたびにvalueを更新 だからカスタムコンポーネントで使うには props: ['value'] v-on:input="$emit('input', 送りたい値)" で使える 親の値を子の入力で変更…