[Vue.js]Bootstrapとスロットは相性が良い

[Vue.js]Bootstrapとスロットは相性が良い

Vue.jsのスロット機能を使ってみると意外に便利だったため、ざっくりまとめます。 スロット Vue.jsのスロットとは、簡単にいうと「 子コンポーネントの一部を親コンポーネントから差し込む 」ことができる機能です。 Vue.js > ガイド > コンポーネント > スロットによるコンテンツ配信 スロットによる...

[Vue.js]イベントハンドリングおさらい

[Vue.js]イベントハンドリングおさらい

Vue.jsのイベント回りをちょっと細かめに触る機会がありました。 ガイドを読んで学んだことをまとめます。 ドキュメント Vue.js > ガイド > イベントハンドリング 環境 Vue.js 2.2.x npm 4.0.x node.js 7.0.x v-on イベントをバインドするにはv-on...

AD

[vue-router]パラメーター違いのページリンクをクリックしても更新されない時は?

[vue-router]パラメーター違いのページリンクをクリックしても更新されない時は?

vue-routerでちょっとつまづいた点をまとめます。 遭遇したバグ のサイドバーに設置したrouter-linkをクリックしても反応せず、ページが更新されない。 宣伝:技術書サイトとはこちらでーす。 ITエンジニアのための技術書レビューサイト(仮) 技術書Yome OKな挙動 を表示中にサイドバーからタ...

Twitter認証とJWTでログイン機能を実装した話

Twitter認証とJWTでログイン機能を実装した話

atuwebでは 「ITエンジニアのための技術書レビューサイト(以下、技術書サイト)」を開発、公開しております。 順番が前後しましたが、このサイトにようやくログイン機能追加を行いました。 ITエンジニアのための技術書レビューサイト(仮) 技術書Yome !! Overview LaravelとVue.jsで実装したサイ...

Vue.jsで実装したサイト「技術書 Yome」を公開しました

Vue.jsで実装したサイト「技術書 Yome」を公開しました

こんにちは。 tomita@atuwebです。 2017/5/15にIT系技術書のレビューサイト(予定)を公開いたしました。 技術書Yome(スモールスタート中) 技術書Yome ITエンジニアのための技術書レビューサイト(予定) 現在はびっくりするくらいスモールスタート中です。 というのは、会員登録もレビュー機...

[Vue.js]フェードイン/フェードアウトを実装する

[Vue.js]フェードイン/フェードアウトを実装する

小ネタです。 トランジション Vue.jsでフェードイン/フェードアウトを実装するにはtransition(トランジション)を利用します。 トランジションとは画面遷移など「場面転換時の演出効果」を指し、ビデオ編集などでも使われる単語ですね。 Vue.jsでは簡単にトランジションを利用することができますよ。 Vu...

AD

[Vue.js]Mixinで処理の共通化を図る

[Vue.js]Mixinで処理の共通化を図る

Vueの勉強が着々と進みmixinを覚えましたため、使い方をまとめます。 mixinとは mixinとはVue.jsが提供する「再利用のための仕組」みです。 公式から引用します。 ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。 ミックスインオブ...

[Vue.js]BootstrapとVue.jsでイケてるフォームを実装する

[Vue.js]BootstrapとVue.jsでイケてるフォームを実装する

Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。 イケてるフォーム 初期状態です。 入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。 また全ての不備が取り切れるまでSubmitボタンはdisabledとします。 何か入力し、エラーがなくなるとリ...

[Vue.js]コンポーネントの親子連携を理解する

[Vue.js]コンポーネントの親子連携を理解する

Vue.jsを触って早数週間経過します。 最も理解に時間がかかったコンポーネントの連携についてまとめてみます。 理解が怪しいところはマサカリをお願いいたします。 ゴール 子コンポーネントから親コンポーネントの関数を呼び出す 環境 Node.js 7.7.1 npm 4.4.2 Vue.js 2.2.4 prop...

おすすめ記事