Vue.js의 *.Vue 파일에 대한 설명-JS 튜토리얼-php.cn

vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크로 상향식 증분 개발 디자인을 채택합니다. (상향식 설계 방법은 특정 장치, 논리 구성 요소 또는 유사한 시스템에서 시작하여 시스템 기능 요구 사항을 기반으로 하며 설계자의 숙련된 기술과 풍부한 경험을 바탕으로 이를 상호 연결, 수정 및 확장하여 필요한 시스템을 형성합니다.) Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있습니다. 시작하기 쉬울 뿐만 아니라 타사 라이브러리나 기존 프로젝트와도 쉽게 통합할 수 있습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.

*.vue 파일이란 무엇입니까

우선 vue-cli 스캐폴딩을 사용하여 구축한 프로젝트에서 우리는 index.vue 또는 App.vue와 같은 많은 파일을 접했습니다. 이게 대체 뭐야? Vue 개발이 처음이라면 이전에 이 내용을 본 적이 없을 수도 있습니다. *.vue 파일은 HTML과 유사한 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 정의 파일 형식입니다. 각 .vue 파일에는 세 가지 유형의 최상위 언어 블록 , 및 이 포함되어 있습니다. 이 세 부분은 각각 html, js 및 css를 나타냅니다.

그 중 과 은 미리 컴파일된 언어로 작성하는 것을 지원합니다. 예를 들어, 우리 프로젝트에서는 scss 사전 컴파일을 사용하므로 다음과 같이 작성합니다.

로그인 후 복사

html에는 vue도 지원하는 자체 사전 컴파일된 언어가 있지만 일반적으로 말하면 우리 프런트엔드 직원은 여전히 선호합니다. html의 기본 언어이므로 너무 자세히 설명하지 않겠습니다.

또한 App.vue 파일에서 @import "./style/style" 문장을 사용하여 지정된 위치에 스타일을 작성했습니다. 따라서 이 부분의 내용은 이후의 모든 기사에 게재되지 않습니다. 모든 스타일은 src/style/ 폴더의 해당 위치에 작성됩니다. 이것의 장점은 다양한 scss 기본 파일을 반복적으로 소개할 필요가 없고, 프로젝트의 스타일 코드를 제어할 수 있다는 점입니다.

*.vue 파일 코드 분석

먼저 간단히 살펴보겠습니다.

import Header from '../components/header.vue' import Footer from '../components/footer.vue' export default { components: { Header, Footer }, data () { return { list: [] } }, created () { this.getData() }, methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } } .article_list {margin: auto;} 로그인 후 복사

위는 간단한 *.vue 파일의 기본 구조입니다. 부분별로 설명해 보겠습니다.

템플릿 부분

아래에서는 더 이상 *.vue 파일이라고 부르지 않습니다. Vue 컴포넌트로 변경되었습니다. 우선, vue 구성 요소의 템플릿은 html 구조를 나타내므로 모든 사람이 이해할 수 있다고 믿습니다. 그러나 에 코드를 래핑하는 것만으로는 충분하지 않으며, 모든 코드를 래핑하려면 내부에 html 태그를 배치해야 한다고 말하는 것은 아닙니다. 이 예에서는

태그를 사용합니다.

이게 뭐죠? 코드를 보면 다들 많이 놀라시겠죠? 실제로 이것은 사용자 정의 구성 요소입니다. 우리는 다른 곳에서 컴포넌트를 작성한 다음 이런 방식으로 소개할 수 있습니다. 마찬가지로 도 구성 요소입니다.

스크립트 부분

먼저 두 개의 사용자 정의 구성 요소가 필요하며 먼저 인용하겠습니다. 다음 형식이 이해하기 더 쉽습니다.

import Header from '../components/header.vue' import Footer from '../components/footer.vue' 로그인 후 복사

두 번째로, 참조된 파일 외에도 모든 코드를 다음 코드로 래핑합니다.

export default { // 这里写你的代码，外面要包起来。 } 로그인 후 복사

먼저 두 구성 요소인 Header와 Footer의 소스 파일을 소개한 다음, 참조된 구성 요소를 구성 요소로 선언해야 합니다. 이런 식으로 템플릿에서 사용할 수 있습니다.

components: { Header, Footer }, 로그인 후 복사

데이터는 우리의 데이터입니다. 우리의 데모 코드는 빈 배열 데이터 목록을 제공합니다. 템플릿에서 this.list를 사용하여 데이터를 사용할 수 있습니다. 이에 대해서는 다음 글에서 다룰 예정이므로 여기서는 자세히 다루지 않고 그냥 알아두시면 됩니다.

data () { return { list: [] } }, 로그인 후 복사

created는 구성 요소가 로드될 때 실행되어야 하는 항목을 나타냅니다. 예를 들어 여기서는 로드가 완료되면 구성 요소가 this.getData()라는 함수를 실행하도록 합니다. 또한 vuejs의 Hook 함수 중 하나가 생성되었습니다. (구체적인 Hook 기능은 부록을 참고해주세요)

created () { this.getData() }, 로그인 후 복사

methods는 우리 컴포넌트의 메소드이며, 함수라고도 할 수 있습니다. 예를 들어 위 코드는 구성 요소가 getData()라는 메서드 함수를 사용자 정의했음을 나타냅니다.

methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } 로그인 후 복사

스타일 부분

은 비교적 간단합니다. 템플릿의 콘텐츠에 나타나는 html 요소에 대한 일부 스타일을 작성하는 것입니다. 내 코드는 다음과 같습니다.

.article_list {margin: auto;} 로그인 후 복사

이 시점에서 우리는 vue 구성 요소 파일에 대해 어느 정도 이해해야 합니다. 다음 블로그 게시물에는 더욱 다양한 작성 방법이 포함되어 있으므로 이 게시물을 읽은 후 vue의 공식 문서를 확인하는 데 더 많은 시간을 할애하는 것이 좋습니다. 모든 문서를 이해할 수는 없더라도 전반적인 이해가 있어야 합니다. 그렇지 않으면 다음 학습이 더 어려워질 것입니다.

Appendix

Hook은 vuejs의 생명주기로 이해될 수 있는 반면, 함수는 생명주기의 각 단계에서 발생하는 이벤트 메서드입니다. 아래와 같이