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.jsでjQueryと共存させる方法 - Qiita
今回、Vue.jsをなんとか覚えようと思って頑張ってみました。 巷でよく「デザイナーでもとっつきやすいVue.js」とありますが、私の場合、アニメーションなどのDOM操作を中心にjQueryを使用しているので、その場合は全然とっつきやすくはなかったです。 開発側でない為に、開発の基本的概念の知識が乏しく、Vue.jsの概念を理解したり、環境構築したり、というところでつまづいてしまいました。 であるならば、無理してまずはVue.jsで書ききる必要もなく、学習コストを下げるために一旦、Vue.jsとjQueryと併用で使いながらちょっとずつ覚えていけばいいんではないか・・・と思ったので、今回は併用する手段を紹介しようと思います。 1.VueをCDNもしくはローカルで読み込ませるパターン Vue.jsがどのように動いているかを学ぶにあたって、このパターンが一番とっつきやすかったです。 LPなどの
Vueで複数条件(or検索とand検索)での絞り込み検索を行う方法
Vueを使った検索機能を実装中で、or検索（チェックボックス）とand検索(セレクトボタン)を併用した絞り込み方法がわかりません。 尚、or検索（チェックボックス）を使った絞り込みまでは成功しています。 今回やりたいこととしては、その検索結果から絞り込みを行いたいと考えております。 仕様 ・10件の会社データがあり、エリア（東京か大阪）をチェックボックスで選択できる ・上記でチェックをつけた後、さらに徒歩（5分、10分、15分）での絞りこみを行う // まだ未完成の状態 わからないこと ・セレクトボックスを実装する場合の、vueでの記述方法がわかりません ・チェックボックスで選んだ結果を反映させつつ、そこから絞り込みを行う方法がわかりません HTML <div id="app"> <p>件数:{{filteredList.length}}件</p> // 結果件数の表示 <p>エリア<
Vue.js + Vuexでストアの絞り込み検索（フィルター）
Vue.js + Vuexでストアの絞り込み検索（フィルター） LaravelでSPA（タスク管理アプリ）作る日記5回目です。今回はVuexのStateに対して絞り込み検索を実装します。 投稿日2018年11月21日 更新日2018年11月21日 この記事は下記の続きです。 Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 Laravel + Vue.js にVuexを導入する LaravelでCRUD APIを作成する Laravel+Vue.js+VuexでフロントのCRUDを作成 完成イメージはこんな感じです。 ストアの作成 ストアから見ていきます。 tasksステートは実際はサーバーから受け取るデータなので実際は空ですが、データ構造は次のようになっています。 resources/js/store/modules/task.js const state
Vueで複数条件(and,or,フリーワード)の絞り込みを実装する - Qiita
まずはサンプル 機能の違いが多少ありますが、下記記事のVueJS版になります。 jQueryを使った複数条件(and,or入り混じり)の絞り込みを実装する 表示しているのはこちらの記事で使ったお店のリストの改良版です。 今回は管理するデータがより多く複雑になったので、データはjson形式でまとめてaxiosで読み込んでいます。 絞り込みの条件 グループ化されたカテゴリがあり、同グループ内を複数選択した場合はor（和食||洋食）、グループを跨いで選択した場合はand（和食||洋食&&肉）での絞り込みになります。 またフリーワード検索を作り、これもフリーワード&&選択したカテゴリというふうにandで絞り込まれます。 jQuery版との比較 データバインディングの面でVueが圧倒的に優れています。さすが。 そのおかげでjsのソースもシンプルに書くことができました。 必然的にオブジェクト指向に則っ
Vue.jsでjsonファイルからデータを取得する
Vue.jsでjsonを取得する方法を、axiosを使う場合とfetch()を使う場合でそれぞれ試してみます。 axiosを使う場合 まずはaxiosを使ってsample.jsonのようなjsonファイルを取得してみます。 まず必要なファイルを読み込みます。 <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 次にjsonの内容を表示するHTMLを用意します。 <div id="app"> <o
フォーム入力バインディング — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
連動するプルダウンリストをVue.jsを使って実装する ( with PHP ) - Qiita
みなさんこんにちは プルダウンリストAを選択すると、プルダウンリストBが自動的に切り替わる... 例えば、部署を選んだら、その下の課が選択できるようになるみたいな、そんな連動するプルダウンリストを作りたくなったのです。 初めは、まあ、jQueryでいいかって思ったのですけど、コードがモコモコと増えていきまして、すごい汚い状態になったので、却下して、ふんわりとVue.jsで実装しようとしたのだけど、ググってもあまり出てこなかったので、とりあえずリファレンス見ながら実装してたら、普通に書けちゃったので、忘れないうちに記事にしちゃおうと。 あ、SPAの話じゃないっすよ、普通にMPAでの話っす。 あと、タグのPHPに不穏な空気を感じたりしないこと。 TL;DR MPAなので、データはグローバルにjsonでベタがき Vue.jsのデータバインディングの仕組みを使って、連動先のリストを切り替える 複数
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Wantedly（ウォンテッドリー）はたらくを面白くするビジネスSNS
絞り込み検索機能について、複数・並列のフィルタをどう処理したらいいのか
Vuex 絞り込み機能を実装したい