サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
vue-loader-v14.vuejs.org
CSS モジュール バージョン ^9.8.0 が必要 CSS モジュール は CSS をモジュール化して構成するための一般的なシステムです。vue-loader はシミュレートされたスコープ付き CSS の代わりに CSS モジュールの一流の統合を提供します。 使い方 module 属性を <style> タグに追加します: <style module> .red { color: red; } .bold { font-weight: bold; } </style> css-loader の CSS モジュールモードを有効にし、その結果クラス識別子オブジェクトは $style という名前の算出プロパティとしてコンポーネントに注入されます。ダイナミッククラスバインディングを利用してテンプレートで使用可能になります。 <template> <p :class="$style.red"> T
ホットリロード "ホットリロード"はファイルを編集するときに単にページをリロードするだけではありません。ホットリロードを有効にすると、*.vue ファイルを編集するとき、すべてのコンポーネントのインスタンスは ページのリロードをせずに 取り替えられます。アプリの現在の状態を保持し、コンポーネントを取り替えることが出来ます!これはコンポーネントのテンプレートやスタイリングを微調整するときの開発体験を劇的に改善します。 状態維持ルール コンポーネントの <template> を編集するとき、編集されたコンポーネントのインスタンスは、そのまま再描画し、全て現在のプライベートな状態に維持します。これは、テンプレートが副作用を発生させない新しい描画関数にコンパイルされるため可能です。 コンポーネントの <script> 部分を編集するとき、編集されたコンポーネントのインスタンスは破棄され、そのまま再
Vue Component の仕様 *.vue ファイルは HTML のような構文を使用して Vue コンポーネントを記述するカスタムファイルフォーマットです。各 *.vue ファイルは <template>、<script>、<style> の三つのトップレベル言語のブロックで構成されています。 <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style> <custom1> 例えばコンポーネントのドキュメントを書くことが出来ます </custom1> vue-loader はファイルを解
スコープ付き CSS 再帰されたコンポーネントの子孫セレクタには気をつけてください! セレクタ .a .b を持つ CSS ルールの場合、.a にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての .b はルールにマッチします。# スコープ付き CSS scoped 属性をもつ <style> タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。PostCSS を使用して以下を変換することによって実現しています: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> <
はじめに Vue Loader とは ? vue-loader とは以下の形式で記述された Vue コンポーネントをプレーンな JavaScript モジュールに変換する webpack の loader です。 vue-loader によって多くのクールな機能が提供されます: デフォルトで ES2015 が有効 <style> には Sass、 <template> には Jade など、Vue コンポーネントの各パーツに他の webpack の loader が使用可能、カスタム loader チェーンを適用できる .vue ファイルのカスタムセクションを追加可能 <style> と <template> で参照される静的なアセットをモジュールの依存として扱い、webpack の loader で処理可能 各コンポーネントで scoped CSS をシミュレートすることが可能 開発時の
このページを最初にブックマークしてみませんか?
『vue-loader-v14.vuejs.org』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く