Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo
イベントの購読(サブスクライブ) v-onディレクティブを使うことで、DOMイベントの購読、イベント発火時のjavascriptの実行 <div id="example"> <p>ボタンを押すとカウントが増えます</p> <p>カウント: {{ counter }}</p> <button @click="counter += 1">カウントアップ!</button> </div>
2018年12月27日 webpack 4とmini-css-extract-pluginを使ってCSSを別ファイルに書き出す方法 UI開発者 古川 Vue.jsで単一ファイルコンポーネントを用いる際にCSSをひとつのファイルに書き出す方法は公式のドキュメントに掲載されています。しかしドキュメント内で紹介されているExtract Text Pluginの最新バージョン(v3.0.2)は2018年12月現在webpack 4に未対応なため、webpack 4の環境下で実際に導入するとエラーが出てしまいます。 そこで今回は、Extract Text Pluginで利用を推奨されているmini-css-extract-pluginを用いてVue.jsの単一ファイルコンポーネントに記述されているCSSを別のファイルに書き出す方法をご紹介します。 mini-css-extract-pluginの導入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く