サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
dev83.com
propsはどんな時に使うの?まずは、propsのおさらいをしましょう。 propsは親コンポーネントから子コンポーネントにデータを渡すときに使います。 基本的な書き方はつぎのとおりです。「Vue CLIを使った開発環境構築方法」で作ったVueプロジェクトを編集してみましょう。 親コンポーネント側/src/views/Home.vueをつぎのように書き換えます。コードの内容についてはコメントをご確認いただければと思います。 <template> <div> <!-- nameとpriceに静的な値をセットして 子コンポーネント(Item)にデータを渡しています。 --> <Item name="りんご" price="100"></Item> <!-- こっちのnameとpriceには動的な値をセットしています。 動的な値なので、nameとprice属性には:(v-bind:の省略形)を付
算出プロパティ ※計算機能付きのプロパティデータそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる計算結果をキャッシュする一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返すプロパティなので呼び出し時の()はいらないgetterとsetterが使える <div id="#app"> {{ 算出プロパティ名 }} <!-- 算出プロパティの呼び出し方 --> </div> <!-- Vue.jsを読み込んでおく --> <script> new Vue({ // ... computed: { // 関数として実装、参照時はプロパティとして機能 算出プロパティ名: function() { // return ... } } }); </script>
Vuetifyを導入したものの、使い方にクセがあって投げ出してしまった方もいるのではないでしょうか。ぼくも今だに試行錯誤しながら使っていますが、何を作る場合でも必要な基本的な知識があります。v-app、v-content、v-container、v-layout、v-flexあたりがそれかなと思います。この記事ではそれらの使い方について解説しています。 VueプロジェクトにVuetifyの導入をまだしていない方はこちらの記事(Vueプロジェクトへのインストール手順)でインストールをして、実際にコードを書きながら読みすすめていただいた方がわかりやすいと思います。
.git/ # バージョン管理システムGitのディレクトリ node_modules/ # npm install コマンドでインストールしたnpmパッケージを管理するディレクトリ public/ # webpackに処理されないアセットを格納するディレクトリ ├ favicon.ico # ファビコン └ index.html # index.htmlテンプレート src/ ├ assets/ # webpackに処理されるアセットを格納するディレクトリ ├ components/ # UIコンポーネント(単一ファイルコンポーネント) ├ views/ # webpackに処理されるアセットを格納するディレクトリ ├ App.vue # 実行エントリポイントとなるコンポーネント ├ main.js # アプリケーションのエントリポイントのスクリプトファイル └ router.js # V
子から親コンポーネントのデータを更新する方法を教えてください。$emitってどうやって使ったらいいのかよく分かりません(´_`。) 親コンポーネントから子コンポーネントにデータを渡すには、propsプロパティを使います。詳しくは「【Vue.js】propsを使う時は命名に注意。サンプルコード有」に書きました。 では、反対に子コンポーネントから親コンポーネントのデータを更新するにはどうしたらいいでしょうか。結論から言うと、$emitでイベントをトリガ(きっかけとなるもの)して、v-onディレクティブでイベントを購読することで実現可能です。 文章だけだとよくわからないと思いますので、コードを書きながら子から親コンポーネントのデータを更新する方法を学んでいきましょう。 子から親コンポーネントのデータ更新を実装したサンプルを確認してみよう子から親コンポーネントのデータ更新を実装して、以下のようなサ
このページを最初にブックマークしてみませんか?
『たのしいWeb|Webのことを中心に発信』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く