# 時間差トランジション トランジションフックを使用することで、リストの要素を表示するタイミングをずらす時間差トランジションが行えます。 このコンテンツは、コードが長すぎて書籍から削ったものなので、若干説明も入っています。 # デモ # 使用している主な機能 リストトランジション 205ページ トランジションフック 212ページ 算出プロパティ computed 120ページ # ソースコード ソースコード # 動的なリストを作成 まずは、トランジションを適用する動的なリストを準備しましょう。 リストへの要素の追加と削除、current プロパティの倍数の要素のみを抽出する機能を実装しています。 <template> <div class="example"> <p> <button @click="doAdd">追加</button> <button @click="current=1"

vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo

どうも。VueにハマりまくりのTack-Tです。 今回はFirebase Authenticationを使った認証機能の実装について書いてみたいと思います。 Firebase Authentication便利ですよね。 ただ、Vuexにユーザ情報とか保持させているとリロード時に気を付けてあげる必要があります。 今回はこの部分にフォーカスを当ててみます。 おそらく長くなるのでSPA編とSSR編に分けて連載にしようと思います。 この記事を読む前に 今回はFirebaseUIを使いますが導入や設定については本記事では触れません。 理由は優良な記事が他にたくさん存在するからです。 また、以下の資料には必ず目を通しておいてください。 FirebaseUI でウェブアプリに簡単にログイン機能を追加する FirebaseUIのREADME ことのはじめ 今回のテーマの例として以下の機能を持ったアプリを作

上記のようにモーダルウィンドウに表示する内容を props で表現してしまうと、自由度が低く使いまわしにくくなります。たとえば画像やリストやテーブルが入れられませんよね。 そこでスロットを利用します。 <modal> <template #title> This is modal window </template> <template #content> <img src="..." alt="" /> <ul> <li>...</li> </ul> </template> </modal>

Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Apps that communicate in real time are becoming more and more popular nowadays, as they make for a smoother, more natural user experience. In this tutorial, we’re going to build a real-time chat application usi

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocumentって何？ となったり、doc、docRef、cityRef、cityDocRef、snapShot、docs など、本家ドキュメントの中でも若干変数名の書き方が異なっていたりします。その為、慣れてくれば大丈夫ですが、慣れるまで毎回どう書くんだっけ？と検索することが多かったので、自分なりに解釈して整理してみました。Firestoreを扱える言語は様々用意されていますが、ここでは、JavaScript（Nuxt.js)を例に進めていきます。（セットアップは省きます） 参照元：https://firebase.google.com/docs/firestore/manage-data/add-d

目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ

Vue.jsを使っていると 「子に渡したpropsの値を変更したら親側の値も変更されるようにしたい！」 というシーンに割とよく直面する。 propsの値はそのままv-modelでは使用できないという制約もあり、回避策の知識がないと割と困ってしまうものである。(公式に書いてあるけどというツッコミは無しな！) なので今回は子のComponentで変更された値を親に反映する方法を紹介します。 実行結果だけ知りたい人はSandboxが一番下にあるのでスクロールしてね☆ modelプロパティを指定する Vue.js 2.2.0 からmodelプロパティが追加された。 詳しくは公式にかかれているが、正直わかりにくかったのでここでも解説する。 子のComponentで以下の宣言をする export default { model: { prop: 'propData', event: 'input' }

Wantedlyは、運命のチームや仕事に出会えたり、人脈を広げ、ビジネスの情報収集に使えるビジネスSNSです。

Vue.js 2系を対象とします。 何がしたいかというと、 <my-great-text-input v-model="text" /> ということがしたい。 とりあえずドキュメントを見ると、以下のような方法が書いてある。 https://jp.vuejs.org/v2/guide/components.html#カスタムイベントを使用したフォーム入力コンポーネント <template> <input type="text" :value="value" @input="updateText"> </template> <script> export default { props: ['value'], methods: { updateText(e) { this.$emit('input', e.target.value) } } } </script> ただ、必ずしもこれしか方法が

やわらかVue.jsについて / 迷わないVueの学び方 / イベント情報 / フロントエンドを気楽に歩こう / 猫本以前 / 書籍 / 【漫画で解説】Vue.jsで楽をしよう！ / レイアウトどうすればいい？ / 参考になるページ / webpackの動作を見てみよう / vue-routerとかvuexって使ったほうがいいの？ / Vueのコミュニティに入りたい！ / flaskやrailsと

DjangoフレームワークとVue.jsでアプリケーションを作る例として、テキストを編集保存するシンプルなノートアプリケーションを作ってみました。 github.com Djangoのサーバーサイドレンダリングを使いつつ、Vueを組み合わせる一例として参考になればよいかなと。 Django側はDjango REST FrameworkでAPIを用意していて、意図的にテストコードは用意してません。 JavaScriptのほうは、Vue.jsを使いつつ、なるべくテストコードを書きやすいように作ってみました。 その他詳細は、リポジトリにREADMEがあるので参照してみるとよいかと。 コードに説明のコメントなども入れています。