> 웹 프론트엔드 > View.js > Vue의 구성 요소에 CSS 스타일을 추가하는 방법

Vue의 구성 요소에 CSS 스타일을 추가하는 방법

coldplay.xixi
풀어 주다: 2023-01-13 00:44:50
원래의
5125명이 탐색했습니다.

Vue의 구성 요소에 CSS 스타일을 추가하는 방법: 먼저 [.vue] 파일에 관련 코드를 설정한 다음 새 [index.js] 파일을 만들고 해당 [record.scss] 파일을 만듭니다.

Vue의 구성 요소에 CSS 스타일을 추가하는 방법

이 튜토리얼의 운영 환경: 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 &#39;./record.vue&#39;;
export default record;
로그인 후 복사

해당 Record.html, Record.js, Record.scss 파일을 생성하세요. .js를 예로 들어보세요:

// -- NAME --
const name = &#39;record&#39;;
// -- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿