Vue.jsとBootstrapでナビゲーションバーを作る - Qiita
はじめに Vue.jsを用いてポートフォリオなどを作成するとき、Bootstrapを使いますよね。 そのときに、ナビゲーションバーを実装するのが少し詰まった点だったので残しておきます。 大まかな流れやVue CLIに関しては、下記記事を参考にさせていただきました。 ありがとうございました。 https://qiita.com/masa08/items/3474d97a1283dfc275c9 https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2 環境構築 Node.jsのインストール まずは開発環境にNode.jsをインストールして下さい。 https://nodejs.org/ja/ 最新版でも良いですが、LTS（Long Term Support）版のほうが安定動作すると思います。 インストールした後に、念のため下記コマン
Is it possible to trigger events using Vue.js?
I have just started using Vue.js and find myself continuously turning to jQuery to help in certain situations. Most recently I have attempted to, unsuccessfully "trigger" (or emulate) an event, such as an on click or blur event. I know in jQuery you can do the following: $('#my-selector').trigger('click'); But how can this be acheived using Vue.js? I am wanting to move away from using jQuery as mu
Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ！ - 親バカエンジニアのナレッジ帳
dataプロパティでオブジェクトの定義 変更する場合は$setで置き換え 配列中のオブジェクトはループなどで同様に変更可能 例1) 配列の2番目（インデックスのキーが1）の場合にvalueを変更する場合 例2) nameが「test2-Name」の場合にvalueを変更する場合 dataプロパティでオブジェクトの定義 Vue.jsでインスタンスを生成した際、dataオブジェクトに変数を定義した場合のリアクティブな動作についてはご存知だと思いますが、テンプレート内でdataオブジェクトに定義した変数を使用していた場合、変数の中身が変更されるとリアクティブに変更されます。 リアクティブについて詳細に述べるのは別な機会にするとして、簡単に言えば変数が変更されると、それに応じてテンプレート内で使用されている箇所も同時に変更され、変更後の値に応じた振る舞いをします。 単なる文字列(String)や数
vue.jsのSlotからScoped Slotまでを理解しよう | アールエフェクト
vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo
vue-router で絶対パス ( http 始まり ) を取得する - Qiita
this.$router.resolve({ name: 'ExmaplePage', params: { id: id } }).href
Vue.js axiosをajaxライブラリとして導入する
Vuex mutationでstateの値を変更するでVuexでmutationを実装するまで行いました。 次はVuexのactionについて説明したいところですが、そのためにはajaxのライブラリを導入していたほうが、わかりやすいとので、ajaxライブラリのaxiosの導入方法を紹介します。 Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。 vue-resourceというライブラリが公式ライブラリとされていましたが、現在ではaxiosを使うように推奨されています。 私も最初はvue-resourceを使用していて、途中でaxiosに変更しましたが、ajax処理の記載方法はほとんど同じでしたので、コードの書き換えも少なくスムーズに移行できました。 パッケージのインストールaxiosのパッケージをインストールします。
Vue.js vue-waitを使用してloading中を表示する
<template> <div id="app"> <v-wait for="loading"> <template slot="waiting"> <div> リストをロード中... </div> </template> <ul class="list-group" style="margin: 0 auto; width: 600px;"> <li v-for="(item, key) in myList" :key="key" class="list-group-item">{{ item }}</li> </ul> <button @click='load' class="btn btn-primary">リストをリロード</button> </v-wait> </div> </template> <script> const list = ['メロン', 'モモ', 'スイカ',
【Vue.js】ローディング画面の実装方法（サンプルコード付き） - Qiita
<template> <v-app> <Loading v-show="loading"></Loading> <Home v-show="!loading"></Home> </v-app> </template> <script> import Loading from '@/components/Loading' import Home from './views/Home' export default { name: 'App', data() { return { loading: true, } }, mounted() { setTimeout(() => { this.loading = false; }, 1000); }, components: { Loading, Home, }, }; </script> 前提 Vuetifyを使用しているので、<v-app>で
vue-routerのナビゲーションガードを利用してページ遷移時のローディング処理をまとめる - Mobile Factory Tech Blog
これは、モバイルファクトリー Advent Calendar 2018 の16日目の記事です。 こんにちは、エンジニアのid:tenmihiです。 今日の記事は、vue-routerのナビゲーションガードを利用してページ遷移時のローディング処理を実装する方法のご紹介です。 概要 業務で次のような要件を満たすフォームをvueを用いて実装しました。 フォームが複数のページで構成されている(いわゆるウィザード、ステップ形式) 各ページに遷移するタイミングでフォームの構成に必要なデータをfetchしてきて、結果が返るまではフォームの操作をローディング画面を挟んで制限する ローディング処理についてcreatedフック内のfetch処理の前後でloadingフラグを操作する方法を考えましたが、毎ページでフラグ操作を記述するのが冗長に感じました。 <template> <div> <form> ...
Vueのライフサイクルを完全に理解した - Qiita
Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。 ここでは、インスタンスのライフサイクルごとに説明したいと思います。 インスタンス作成時 インスタンス作成時には以下の2つのフックを実行されます beforeCreate <script> export default { data(){ return{ hoge:"a" } }, beforeCreate () { console.log('hoge is: ' + this.hoge) } } </script> /
【Vue】知っておきたい .sync修飾子のすゝめ - Qiita
Vue.js 2.3.0から実装された 「.sync 修飾子」がVue.jsを書いていると陥るよくある困りごとを解決したので紹介します！ サンプルコードはこちら↓ https://github.com/harhogefoo/vue-sync-modifier-sample 対象読者 Vue.js 経験者 子コンポーネントに複数のプロパティをバインドさせたい人（Object型も含む） これから大量の入力フォームを子コンポーネントに分割して実装していくんだぜ...な人 よくある困りごと 例えば、新規作成(new)、 編集(edit)それぞれのページの共通のフォームのコンポーネントを実装する場合、 そのコンポーネントにフォームの情報を持つObject型のプロパティを渡したくなりますよね。 Vueでは、プロパティを渡した先でプロパティの情報を更新しようとすると、 以下のようなwarningログが出
Laravel Mix (webpack) で、ロードパスのAliasを作ると ../../ が無くなって便利 - Qiita
Laravel Mix (webpack) で、ロードパスのAliasを作ると ../../ が無くなって便利JavaScriptLaravelwebpack Laravel というよりは Webpack の話なんだけど、もっと早く設定しておけば良かったと思ったのでメモ。 前提 Laravel 5.4 webpack (Laravel mix) で開発している。 問題 自分で作ったコンポーネント等を読み込む時に、相対パス指定していた。 が、それだと、 import Hoge from '../../Hoge.vue' などとなって分かりにくいし、ディレクトリ構成を変えると毎回変えるのが面倒だった。 解決策 下記を webpack.mix.js の最初の方に加える。
Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model） - Qiita
Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model）TypeScriptVue.js input欄を含むコンポーネントを作る際に毎回忘れるのでメモ v-bind.syncを使う方法 v-bind.syncはv-bind:hoge, v-on:update:hoge="hoge = $event"のシンタックスシュガーです。 これを意識して子コンポーネントでイベントを発行することで、Form要素を内包するコンポーネントを簡潔に実装できます。
Vue.jsでFormの各要素をComponent化する際の覚え書き - Qiita
2020/04/10 追記 Vue-Composition-API版を書きました。 ↓の記事のv-bind.syncを使うほうが実用的です。 Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model） - Qiita Vue.jsでFormの各フィールドをcomponent化する際の実装例です。 コンポーネント化することで、デザイン、バリデーションなどが全Formで共通化できます。 流行りのAtomicデザインを適応する際などに良いかと思います。 以下コードは、全てこちらのリポジトリにあります。 https://github.com/kawamataryo/Vue-atomic-form Input まず基本のinputのcomponet実装例。 フィールドの値は、@inputで変更を監視して、$emitの'input'を利用し親コン
Vue.js(コンポーネント(データ渡し・イベント発火))(Laravel使用) - Qiita
今回も参考記事をもとに進めさせていただきます。 コンポーネントの基本こちらも見させていただきます。 ◆コンポーネント コンポーネントは、ページの部品ごとに、html/js/cssをまとめちゃおうという考え方(管理がしやすく再利用性も高い) Vue.jsにはコンポーネントをグローバル・ローカルに登録して利用することができます。 <body> <div id="sample"> <sample></sample> </div> </body> <script src=" {{ asset('js/app.js') }} "></script> <script> Vue.component('sample', { template: '<h1>こんにちは</h1>' }); const vue = new Vue({ el: '#sample', }); </script> <body> <di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components | BootstrapVue
vue2-datepicker
Vue.jsのinputイベントがselectタグで発火しない(Internet Explorer 11)原因と対応 | nansystem
【Vue.js】IE11でひっかかるエラー - Qiita
GitHub - ankurk91/vue-loading-overlay: Vue.js component for full screen loading indicator :cyclone:
