はじめに こんにちは。 今回はVue3で親子間のコンポーネント内メソッドの発火方法を紹介していきます。 子から親のメソッドを発火させる方法はご存知の方多いと思いますが親から子のメソッドを直接発火させる方法も紹介していますので参考になれば幸いです。 #注意：Vue3 composition apiの記法で紹介しています。 前提：親と子コンポーネントを作成 まずは親コンポーネントと子コンポーネントを作成していきます。 今回は分かりやすいようシンプルなものにしています。 <template> <button @click="emitEvent" > 子コンポーネント </button> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default de
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でも同じ結果を得られ
<template> <span>{{ todos[0].title }}</span> </template> <script> let vm = new Vue({ el: '#app', data: { todo: { { title: 'task1', isDone: false }, } }, }) </script> <template> <span>{{ remaining }}</span> </template> <script> let vm = new Vue({ el: '#app', data: { todos: [ { title: 'task1', isDone: true }, { title: 'task2', isDone: false }, { title: 'task3', isDone: false }, ] }, computed: { rema
生成されたコンポーネントを取得できる$refs 取得したいコンポーネントのタグ内に、ref属性を付与することでマーキングし、 実際に$refsでマーキングしたコンポーネントを取得できる。 注意点 もちろんすでにレンダリングされたコンポーネントを取得するので、VueライフサイクルにおけるbeforeMount以下のプロパティ内では使用することはできない。 Vueのライフサイクルについてはこちら コンポーネントを特定させる <template> <v-container ref="hoge"> ・・・ </v-container> </template> <script> let hogeComponent = this.$refs.hoge </script>
<template> <div class="parentWidth" ref="getParentWidth"> . . . </div> </template> mounted () { // 要素の幅を取得するメソッド this.getTargetWidth() // ユーザーがウィンドウサイズを変更したら実行されるようにする window.addEventListener('resize', this.getTargetWidth) }, methods: { getTargetWidth () { let targetWidth = this.$refs.getParentWidth.clientWidth console.log(targetWidth) // 要素の幅をInt型で取得する事ができる } }
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 > filter > index.js * 2. vueのインポート
【 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('../view
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に用意されているtransitionコンポーネントを使うフェードインやフェードアウトなどのtransitionを設定することができる。 公式ページ https://jp.vuejs.org/v2/guide/transitions.html 目次 トランジションの方法 クラスの適用フェーズ 適用されるクラスの種類 クラスの命名ルール CSSの設定 トランジションの実例 トランジションの方法 条件を満たすと、特定のclass属性が付与される。このクラス属性に対してcssスタイルを設定する。 使えるディレクティブ： v-show, v-if 要素をtransitionタグで囲む 中のタグは一つのみ。 複数ある場合は上の要素のみ表示される。 要素の状態によって専用のクラスが付与される。 クラスの適用フェーズ 要素の表示・非表示、トランジションの段階によってクラスが付与される。 適用さ
【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のライフサイクルとは？ Vueインスタンスが生成されていから破棄されるまでの流れのこと。 基本的にはページが遷移するたびに破棄されデータなどが初期化され新たに生成される。 なぜいちいち破棄しなければならないのか？ ページごとに値が残っていては、Vueとして、サービスとして機能しないから。 Vue公式のライフサイクルの説明 Vueのライフサイクルは公式で以下のように図解してある。 Vue.js公式・ライフサイクルダイアグラム だが英語だし、初見だと少し分かりにくかったので自分なりに補足などしてまとめてみた。 用語確認 初期化 最初の状態に戻すこと。もしくは最初の状態を整えること。 (https://wa3.i-3-i.info/word12961.html) マウント Vueの形式で書かれたコンポーネントなどの仮想表現を最終的なUI表現に出力するプロセス。 リアクティブデ
はじめに Vue3になって、v-modelにも少し変更があったようなので、 どう変わったのか動作を確かめてみました。 変更点については、以下を参考にしています。 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md 変更点 通常の使い方は変わらない これまで通り、<input>要素に対してのv-modelの使い方は変わらないようです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く