【Vue3】親<->子間のコンポーネントメソッド発火方法 - Qiita
はじめに こんにちは。 今回はVue3で親子間のコンポーネント内メソッドの発火方法を紹介していきます。 子から親のメソッドを発火させる方法はご存知の方多いと思いますが親から子のメソッドを直接発火させる方法も紹介していますので参考になれば幸いです。 #注意：Vue3 composition apiの記法で紹介しています。 前提：親と子コンポーネントを作成 まずは親コンポーネントと子コンポーネントを作成していきます。 今回は分かりやすいようシンプルなものにしています。 <template> <button @click="emitEvent" > 子コンポーネント </button> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default de
Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説
Vue.jsのコンポーネント間でデータを渡す方法はたくさんありますが、Propsを使うかSlotsを使うかはニーズによります。Slotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて紹介します。 The Difference Between Props, Slots and Scoped Slots in Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Vue.jsのProps Vue.jsのSlots 名前付きSlotsとの違い スコープ付きSlotsとの違い 終わりに はじめに 私はVue.jsを使い始めた時は、コンポーネント間のデータをPropsを介して渡していましたが、使い続けていくと、Slotsでも同じ結果を得られ
【Vue.js】Vue CLIグローバルフィルタの作成 - Qiita
#【Vue.js】Vue CLIグローバルフィルタの作成 Vue CLIで作成したサイトでグローバルフィルタを使う方法。 グローバルでフィルタを使用するには、filter関数とfilter名の登録が必要になる。 下記ページを参考にさせていただきました。 https://teratail.com/questions/281227 ##手順 srcフォルダ配下にfilterディレクトリとindex.jsを作成 vueのインポート フィルタの作成 main.jsで作成したフィルタをインポート フィルタを適用する #1. Sorceフォルダ配下にfilterディレクトリとindex.jsを作成する filterのライブラリとしてディレクトリを作成する。 フォルダやファイルの場所や名前は任意だが、以下では、srcディレクトリ配下に作成する例とする。 ・ディレクトリとファイル **PJ > src >
【Vue.js】Vue CLI 新規ページの追加方法 - Qiita
#【 Vue.js】Vue CLI 新規ページの追加方法 Vue CLIで作成したサイトに新たにページを追加する方法。 ##手順 viewsフォルダ配下に新規ファイルを作成する ルーティングを追加 router-linkタグでリンクを追加 #1. viewsフォルダ配下に新規ファイルを作成する viewsフォルダ配下にページを作成する。ファイル名はコンポーネントの作成規則に則り大文字始まり、キャメルケースとする。 以下、BitcoinAPI.vueを作成場合。 #2. ルーティングを追加 routerフォルダのindex.jsファイルのルーティングに作成したページを追加する。 必須なのは、①pathオプションと②componentオプションの２つ。 ①path：URLを記述。 ②component：指定の記述で作成したファイルを指定。 component: () => import('..
【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法 - Qiita
Vue CLIで作成したページはデフォルト状態だと、titleはプロジェクト名で全ページ共通。descriptionは存在しない状態になっている。 各ページ毎に個別のtitleとdescriptionを設定する手順について実例でまとめています。 目次 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加 共通コンポーネントapp.vueにmountedオプションをセット 共通コンポーネントapp.vueにwatchオプションをセット 共通テンプレート(pubulic>index.html)にdescription属性を追加 確認用ソースコード （参考）Vue CLIによるWEBページの作成方法 Vue CLIでWEBページを作成する方法 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp
【Vue.js】フェードイン・フェードアウト（トランジション）の使い方 - Qiita
#【Vue.js】フェードイン・フェードアウト（トランジション）の使い方 Vue.jsに用意されているtransitionコンポーネントを使うフェードインやフェードアウトなどのtransitionを設定することができる。 公式ページ https://jp.vuejs.org/v2/guide/transitions.html ##目次 トランジションの方法 クラスの適用フェーズ 適用されるクラスの種類 クラスの命名ルール CSSの設定 トランジションの実例 ##トランジションの方法 条件を満たすと、特定のclass属性が付与される。このクラス属性に対してcssスタイルを設定する。 使えるディレクティブ： v-show, v-if 要素をtransitionタグで囲む 中のタグは一つのみ。 複数ある場合は上の要素のみ表示される。 要素の状態によって専用のクラスが付与される。 ##クラスの適用
【Vue.js】フォームの要素でv-modelを使い倒す方法と注意事項 - Qiita
【Vue.js】フォーム要素でv-modelを使い倒す方法と注意事項 inputタグやセレクトボックスでv-modelディレクティブを使う方法。便利な修飾子についても学ぶ。 ▼公式ページ https://jp.vuejs.org/v2/guide/forms.html 目次 v-modelとは？ v-modelの注意点 textareaとv-model チェックボックスとv-model 複数のチェックボックス ラジオボタンとv-model セレクトボックスとv-model 複数選択可能なセレクトボックス v-modelの修飾子 .lazy .trim .number 確認用ソースコード v-modelとは？ Vue.jsのディレクティブの１種。 dataオブジェクトのプロパティの値とinputタブの入力値や選択値のデータを連動することができる。 簡単に言うと、画面上でボックスに入力した内容
Vue.jsのライフサイクルを丁寧に図解し直してみた - Qiita
そもそもVue.jsのライフサイクルとは？ Vueインスタンスが生成されていから破棄されるまでの流れのこと。 基本的にはページが遷移するたびに破棄されデータなどが初期化され新たに生成される。 なぜいちいち破棄しなければならないのか？ ページごとに値が残っていては、Vueとして、サービスとして機能しないから。 Vue公式のライフサイクルの説明 Vueのライフサイクルは公式で以下のように図解してある。 Vue.js公式・ライフサイクルダイアグラム だが英語だし、初見だと少し分かりにくかったので自分なりに補足などしてまとめてみた。 用語確認 初期化 最初の状態に戻すこと。もしくは最初の状態を整えること。 (https://wa3.i-3-i.info/word12961.html) マウント Vueの形式で書かれたコンポーネントなどの仮想表現を最終的なUI表現に出力するプロセス。 リアクティブデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】動的なデータの反映まとめ - Qiita
【Vue.js】怖がらないで、引数分割束縛（argument destructuring） - Qiita
Vue. js 親コンポーネントのメソッドの呼び出し - Qiita
【Vue.js】ref属性でマーキングしたコンポーネントを$refsで取得 - Qiita
Vueのref属性使って要素の現在の幅を取得する - Qiita
【Vue.js】Vue CLIで共通テンプレートを作成する方法 - Qiita
【Vue.js】コンポーネントやテンプレートの使い方と注意点を実例でわかりやすく解説 - Qiita
【Vue.js】v-on完全マスター。イベントハンドラの使い方と実例 - Qiita
【Vue.js】動的に画面表示を切り替える方法（条件付きレンダリング） - Qiita
【Vue.js】v-bindを使ったclass, styleの変更方法。動的な変更もできる - Qiita
【Vue.js】主要ディレクティブ一覧と実例 - Qiita
Vue3でv-modelがどう変わったか - Qiita
