JavaScript

JavaScript

【Vue.js】Routerでルーティングする~その3~

前回までの記事はこちら↓ グローバルビフォーガード 全てのページ遷移前に特定の処理を施すことが可能。main.jsでimportしたrouter.jsに.beforeEachを使って、実装を行う。 ...
HTML/CSS

wordpressにInstagramを埋め込みしても画像が表示されない時の対処法

wordpress記事にインスタを埋め込みしても画像が表示されない時の対処法です。個人的にこのような現象に遭遇したので、対処の方法をメモします。 <前提>・投稿はadmin権限で行っている = scriptタグが強制的に消える事はな...
JavaScript

【Vue.js】Routerでルーティングする~その2~

前回の記事はこちら↓ 固定されたレイアウトを作る viewに名前を付けて、固定レイアウトを作ることができる。 どのパスでアクセスされても同じレイアウトを出すためには、パスのcomponentを・複数...
JavaScript

【Vue.js】Routerでルーティングする

Routerとは、Vueが用意しているプラグインで、URLとプロジェクトを関連付ける役割をするもの。これによって大規模SPAなどが作れる。 Routerプラグインのセットアップ CLIで、下記のコマンドを実行してRouterプ...
JavaScript

【Vue.js】トランジション効果を持ったアニメーションを実装する

<transition> <transition>は、ひとつの要素しか入れる事ができない。 切り替えを書き込む時は、v-ifを用いること。v-showは、display:none;で画面上非表示になっているだけなの...
JavaScript

【Vue.js】フィルター(filter)とミックスイン(mixin)

フィルター(filter)でテキストをフォーマットする コンポーネント上で、表示したいdataを作成。 mainで、フォーマット形式を定義。第1引数には、フォーマット名、第2引数には関数をかく。 Vue.filter(...
JavaScript

【Vue.js】カスタムディレクティブを使う

ディレクティブとは、v-から始まるVueが提供しているパーツの事です。Vueが提供しているディレクティブについてはこちら↓ Vueが提供してくれているもの以外でも、自分でv-を作成する...
JavaScript

【Vue.js】v-modelでフォーム要素をコントロールする

v-modelの使い方 v-から始まるディレクティブについて書いた記事はこちら↓ 改めて、inputタグとv-modelでデータバインディングをする方法を記載。 lazy修飾子 v-modelに...
JavaScript

【Vue.js】動的コンポーネント

動的にコンポーネントを切り替える方法 componentタグとv-bind:is を使って切り替えを実装する 切り替えを行いたいコンポーネントをインポートしてcomponentsで定義させる。 今回はボタンを設け...
JavaScript

【Vue.js】slotを使ったコンポーネント間のデータ受け渡し

いままでのコンポーネントについての記事はこちら↓ htmlタグを含めて子にデータを送る時 親テンプレート上で、子コンポーネントのタグ内に送りたいHTMLを記載する。{{}}も使用可能。 子...
タイトルとURLをコピーしました