vietifyのLTを聞いたまとめ
Gregorioという社内サービスを作った話
v-chip
- qiitaのタブなどを簡単に実装
v-tmeline
- タイムラインにつかえる
- 自分左がわで他人は右というライン形式が簡単に実装
v-calendar
- おすすめ
- 日、週、月を簡単切り替え
まとめ
- コンポーネントとサンプルが充実
- どんどんつかっていきたい
Vuetifyを徹底的にカスタマイズし自在なUIを作り上げる5つのポイント
コンポーネントのプロパティ仕様の理解
- 指定された型でない
- プロパティのチェックポイントをつかむ
- 属性がコンポーネントに追加可能
プロパティを使うポイント紹介
スロットを使うとオンポーネントの中のコンテンツを好きなものにおきかえ可能
- スロットの理解は難しので、スライド参照
@inputはネイティブなイベントではなく、カスタムイベント
- どんな時に発火するかをチェックする
- あたいの型をチェックする
.sync修飾子で双方号バインデングを実現
- 注意点はプロパティだけど式がつかえない
V-modelを完全に理解する
- Input要素で双方向バインデングができる
- v-modelと.sync修飾子はよくにている
- Vieとvietifyの違いにはまらないようにする
Vuetifyで管理画面ツクール
メンテナンス画面をSPAで作る話
メンテナンス画面について
- SSRで簡単に作れる（サーバサイドレンダリング）
- SPAで作ると大変、でもあえてこっちでやった
管理画面をSPAにする辛い
- V-data-tableで簡単にマッピングできると思ったらできなかった
- V-pagenationも簡単にできなかった
VueRouterを使って対策した
- ブラウザバックの時にパラメータがうまくとれない
- リロードに弱かった
ナビゲーションガードで対策
- vue-router によって提供されるナビゲーションガード
- リダイレクトもしくはキャンセルによって遷移をガードするために主に使用
- ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法がある
- パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない
非フロントエンドエンジニアが爆速でVuetifyを使うためにキャッチした7つのこと
概要
- 「Vuetifyもとい、bootstrapなどのUIフレームワークの経験が少ない人向け
- 初見で「なんやねんこれ」って思うことを順番に挙げて解説する」
mtーmd２
- Break pointが設定できる
- n*2で４の倍数指定ができる
rowcoloffset
- vuetifyは12のcold
rifles,justify
- グリッドシステムの基本
v-select
- 表示と値をべつにを扱いたい問いに使う
- textとvalue属性を用意
v-datepicker
- Birthday-pickerがなかった
- V-date-pickerをカスタマイズするとできる
バージョンの話
- v1 -> v2で破壊的変更があった
- マイナーバージョンにバグがある
- バージョンバグはあるある
- v2にすべき
- v1をつかっているならquasarを使うとマイグレーションが早い
Vuetify2.xのレイアウト入門
LT目的
- レイアウトに関連する内容にインデックスをはれるように話したい
全体レイアウト
V-app
- アプリケーションコンポーネントで全体的なレイアウトができる
app propを持つコンポーネント
- V-system-barなどは配置する場所が決まっている
v-content
- 周りのコンポーネントに合わせてサイズを変えてくれる
- メインコンポーネント向け
グリッドシステム
構成
- CssのFlexBoxが内部で使われている（１２のColで分割）
- v-containerの中にレイアウトが構成されている
- 1.xから2だとコンポーネントが結構変わっている
- Lint入れた方が良い
５つのブレークポイント
BreakpointServiceObject
折りたたむ
