--- title: [Re:ゼロから始めるVue生活]メモ tags: Vue.js author: dai_designing slide: false --- Vueで個人的に使えそうなものをメモとしてピックアップしていきます。 この記事の内容は全てではないので、1から学習したい方は公式ドキュメントを参照してください。 # VueをCDNで使う雛形 ```vue:VueをCDNで使う雛形 Vue App
{{ message }}
``` # リストレンダリング(画像表示あり) ```vue:リストレンダリング(画像表示あり) Vue App
0: 配列なし
{{ item.id }}: {{ item.title }}
``` # 検索&ソート ```vue:検索&ソート Vue App
円以下

{{ matched.length }}件表示中

{{ item.name }}: {{ item.price }}円
``` # ゲッター・セッター ```vue:ゲッター・セッター Vue App
{{ fullName }}
``` # トランジション雛形 ```vue:トランジション雛形 Vue App

トランジション
``` # リストトランジション ```vue:リストトランジション Vue App

{{ item.name }}: {{ item.price }}円
``` # キーワード検索 ```vue:キーワード検索 Vue App
``` # スタッガリングリストトランジションを利用したキーワード検索 ふわっとした表示のUIになる ※tableだと「transition-group」はエラーで使えません。 ```vue:スタッガリングリストトランジションを利用した検索 Vue App
{{ item.userName }} {{ item.email }}
``` # phpの多重連想配列からVueへの受け渡し ```php:phpの多重連想配列からVueへの受け渡し array( 'id' => '1', 'name' => 'A' ), ), array( 'Shop' => array( 'id' => '2', 'name' => 'B' ), ), ); $list_json = json_encode($data, JSON_UNESCAPED_UNICODE); ?> Vue App
{{ items.Shop.id }}: {{ items.Shop.name }}
``` # Vue CLI × Firebase フォーム送信 ```vue ``` # Vue CLI × Firebase DB描画 ※Vue CLI × Firebase フォーム送信の続き ```vue ```