JavaScript 【Vue.js】Routerでルーティングする～その3～
前回までの記事はこちら↓グローバルビフォーガード 全てのページ遷移前に特定の処理を施すことが可能。main.jsでimportしたrouter.jsに.beforeEachを使って、実装を行う。 .beforeEach には３つの引数を取る...
JavaScript
JavaScript 
HTML/CSS wordpressにInstagramを埋め込みしても画像が表示されない時の対処法
wordpress記事にインスタを埋め込みしても画像が表示されない時の対処法です。個人的にこのような現象に遭遇したので、対処の方法をメモします。＜前提＞・投稿はadmin権限で行っている = scriptタグが強制的に消える事はない・インス...
JavaScript 【Vue.js】Routerでルーティングする～その２～
前回の記事はこちら↓固定されたレイアウトを作るviewに名前を付けて、固定レイアウトを作ることができる。どのパスでアクセスされても同じレイアウトを出すためには、パスのcomponentを・複数形にする・オブジェクトにすることで、固定レイアウ...
JavaScript 【Vue.js】Routerでルーティングする
Routerとは、Vueが用意しているプラグインで、URLとプロジェクトを関連付ける役割をするもの。これによって大規模SPAなどが作れる。RouterプラグインのセットアップCLIで、下記のコマンドを実行してRouterプラグインをインスト...
JavaScript 【Vue.js】トランジション効果を持ったアニメーションを実装する
<transition><transition>は、ひとつの要素しか入れる事ができない。切り替えを書き込む時は、v-ifを用いること。v-showは、display:none;で画面上非表示になっているだけなので、ソースから完全に消えるv-...
JavaScript 【Vue.js】フィルター（filter）とミックスイン（mixin）
フィルター（filter）でテキストをフォーマットするコンポーネント上で、表示したいdataを作成。mainで、フォーマット形式を定義。第１引数には、フォーマット名、第２引数には関数をかく。 Vue.filter("lowerCase",f...
JavaScript 【Vue.js】カスタムディレクティブを使う
ディレクティブとは、v-から始まるVueが提供しているパーツの事です。Vueが提供しているディレクティブについてはこちら↓Vueが提供してくれているもの以外でも、自分でv-を作成することができます。主に、抽象化したコードを再利用したい時に使...
JavaScript 【Vue.js】v-modelでフォーム要素をコントロールする
v-modelの使い方v-から始まるディレクティブについて書いた記事はこちら↓改めて、inputタグとv-modelでデータバインディングをする方法を記載。lazy修飾子v-modelに.lazy修飾子をつけることによって、inputの文字...
JavaScript 【Vue.js】動的コンポーネント
動的にコンポーネントを切り替える方法componentタグとv-bind:is を使って切り替えを実装する切り替えを行いたいコンポーネントをインポートしてcomponentsで定義させる。今回はボタンを設けて、それぞれのボタンが押された時に...
JavaScript 【Vue.js】slotを使ったコンポーネント間のデータ受け渡し
いままでのコンポーネントについての記事はこちら↓htmlタグを含めて子にデータを送る時親テンプレート上で、子コンポーネントのタグ内に送りたいHTMLを記載する。{{}}も使用可能。子テンプレート上では、受け取りたい箇所に<slot>を記載す...