.vue 파일 구문 분석 구현 정보

이 기사에서는 상세한 .vue 파일 구문 분석 구현을 주로 소개합니다. 이제 내용이 꽤 좋아서 참고용으로 제공합니다.

vue 단일 파일

vue는 오늘날 매우 인기 있는 프레임워크 중 하나입니다. 전반적인 느낌은 우아하고 컴팩트합니다. 저는 최근에 이 프레임워크를 사용하여 일부 프로젝트를 수행하는 방법을 배우기 시작했습니다. 공식 문서를 살펴본 후 vue-cli 스캐폴딩을 사용하여 vue 프로젝트를 빠르게 구축하고 실습을 통해 빠르게 배우기 시작했습니다. 프로젝트 파일 구조를 살펴본 후 .vue로 끝나는 단일 파일에 대해 많은 혼란을 겪었습니다.

태그가 무엇인가요? 템플릿은 HTML5의 새로운 요소로, 주로 클라이언트에 콘텐츠를 저장하는 데 사용됩니다. 브라우저는 콘텐츠를 구문 분석하지만 이를 렌더링하지는 않습니다. 템플릿은 이후 문서에서 사용하기 위해 저장되는 콘텐츠 조각으로 간주될 수 있습니다.

단일 파일 구성 요소에 대하여

vue의 단일 파일은 구성 요소에 대한 html-css-js 파일 모음을 포함하여 페이지의 구성 요소와 동일합니다. 이는 공식 프로젝트 관리 및 통합에 유용합니다. 진술은 빌드 단계가 있다는 것입니다. 태그 아래에는 하나의 하위 노드 요소만 있을 수 있습니다. 와 같은 태그를 여러 개 작성하면 아래와 같이 오류가 보고됩니다.

//run --> throw error -Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 로그인 후 복사

.vue 파일에는 html-css-js가 포함될 수 있는데 webpack은 이를 자동으로 3개의 파일로 패키징한다고요?

.vue 파일에서 dom 구조는 태그 아래에 작성할 수 있으며 dom 구조의 스타일 파일은 태그가 존재합니다. DOM 구조를 제어하는 동일한 스크립트가 다른 형제 요소인 에 작성되므로 각 구성요소의 해당 구조 스타일이 동일 파일에 포함됩니다. 다른 구성 요소.

공식 hello.vue 인스턴스

스타일 태그의 속성은 무엇인가요? 차이점은 무엇을 의미하나요?

태그에는 CSS 범위와 CSS 모듈을 각각 나타내는 범위 속성과 모듈 속성이 포함되어 있습니다. 일반적으로 범위 속성은 스타일이 현재 템플릿 부분에만 적용된다는 것을 나타내기 위해 작성됩니다. 컴포넌트 및 하위 컴포넌트

스크립트 태그에서 기본값 내보내기는 무엇을 의미하나요?

전체 텍스트의 유일한 그림에서 태그 아래의 첫 번째 코드 줄이 새로운 모듈 부분의 구문인 내보내기 기본값 {...}임을 알 수 있습니다. ES6, 모듈 사용 이러한 방식으로 각 파일은 자체 모듈이며 내보내기 및 가져오기를 사용하여 인터페이스를 노출하고 참조합니다. 파일이나 모듈에는 내보내기와 가져오기가 여러 개 있을 수 있지만 내보내기 기본값은 하나만 있을 수 있습니다. 이 명령을 사용한 후에는 다른 모듈에서 참조할 때 로드할 모듈 변수 이름을 알 필요가 없습니다. 내보내기 기본값을 사용할 수 있습니다. 무엇을 쓸까요?

변수, 메소드, 객체 등을 포함하여 많은 것을 작성할 수 있으며, 개방형 인터페이스로 사용하려는 경우 data(){} 및 메소드 등을 . vue 파일에서 데이터는 이 구성 요소에 정의된 템플릿 데이터를 참조하며 과 같이 의 요소에 클릭 메서드를 바인딩하면 다음과 같을 수 있습니다. 다음: export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { login: function() { console.log(this.username,this.password); } } } 로그인 후 복사