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 중국어 웹사이트의 기타 관련 기사를 참조하세요!