ホームページ >ウェブフロントエンド >Vue.js >Vue のコンポーネントに CSS スタイルを追加する方法
vue が CSS スタイルをコンポーネントに追加する方法: まず、[.vue] ファイルに関連するコードを設定し、次に新しい [index.js] ファイルを作成し、対応する [record.scss] ファイルを作成します。
このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、Dell G3 コンピューター。
【おすすめ関連記事: vue.js】
Vue でコンポーネントに CSS スタイルを追加する方法:
まず、.vue
ファイルで次の設定を行います。
<template src="./record.html"></template> <script src="./record.js"></script> <style src="./record.scss"></style>
次のように新しいindex.js ファイルを作成します。
import record from './record.vue'; export default record;
対応する Record.html を作成し、 Record.js 、 Record.scss ファイル、 .js を例に挙げます:
// -- NAME -- const name = 'record'; // -- DATA -- const data = function () { return { }; }; // -- COMPUTED -- const computed = { }; // -- COMPONENTS -- const components = { } // -- WATCH -- const watch = { }; // -- METHODS -- const methods = { }; // -- HOOKS -- function mounted() { } // == EXPORT == export default { name: name, data: data, components: components, computed: computed, watch: watch, methods: methods, mounted: mounted };
別のメソッドを直接引用することができます:
<template> <div>html</div> </template> <script src="./***.js"></script> <style src="./***.css"></style>
さまざまな形式がありますが、基本的な考え方は、独立したメソッドを分離することです。ファイル、読み込みの紹介
関連する無料学習の推奨事項: javascript (ビデオ)
以上がVue のコンポーネントに CSS スタイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。