이 기사에서는 상세한 .vue 파일 구문 분석 구현을 주로 소개합니다. 이제 내용이 꽤 좋아서 참고용으로 제공합니다.
vue 단일 파일
vue는 오늘날 매우 인기 있는 프레임워크 중 하나입니다. 전반적인 느낌은 우아하고 컴팩트합니다. 저는 최근에 이 프레임워크를 사용하여 일부 프로젝트를 수행하는 방법을 배우기 시작했습니다. 공식 문서를 살펴본 후 vue-cli 스캐폴딩을 사용하여 vue 프로젝트를 빠르게 구축하고 실습을 통해 빠르게 배우기 시작했습니다. 프로젝트 파일 구조를 살펴본 후 .vue로 끝나는 단일 파일에 대해 많은 혼란을 겪었습니다.
태그가 무엇인가요? 템플릿은 HTML5의 새로운 요소로, 주로 클라이언트에 콘텐츠를 저장하는 데 사용됩니다. 브라우저는 콘텐츠를 구문 분석하지만 이를 렌더링하지는 않습니다. 템플릿은 이후 문서에서 사용하기 위해 저장되는 콘텐츠 조각으로 간주될 수 있습니다.
vue의 단일 파일은 구성 요소에 대한 html-css-js 파일 모음을 포함하여 페이지의 구성 요소와 동일합니다. 이는 공식 프로젝트 관리 및 통합에 유용합니다. 진술은 빌드 단계가 있다는 것입니다.
태그 아래에는 하나의 하위 노드 요소만 있을 수 있습니다.
<template> <p></p> <p></p> </template> //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 구조의 스타일 파일은
공식 hello.vue 인스턴스
스타일 태그의 속성은 무엇인가요? 차이점은 무엇을 의미하나요?
태그에는 CSS 범위와 CSS 모듈을 각각 나타내는 범위 속성과 모듈 속성이 포함되어 있습니다. 일반적으로 범위 속성은 스타일이 현재 템플릿 부분에만 적용된다는 것을 나타내기 위해 작성됩니다. 컴포넌트 및 하위 컴포넌트
전체 텍스트의 유일한 그림에서 태그 아래의 첫 번째 코드 줄이 새로운 모듈 부분의 구문인 내보내기 기본값 {...}임을 알 수 있습니다. ES6, 모듈 사용 이러한 방식으로 각 파일은 자체 모듈이며 내보내기 및 가져오기를 사용하여 인터페이스를 노출하고 참조합니다. 파일이나 모듈에는 내보내기와 가져오기가 여러 개 있을 수 있지만 내보내기 기본값은 하나만 있을 수 있습니다. 이 명령을 사용한 후에는 다른 모듈에서 참조할 때 로드할 모듈 변수 이름을 알 필요가 없습니다.
내보내기 기본값을 사용할 수 있습니다. 무엇을 쓸까요?
변수, 메소드, 객체 등을 포함하여 많은 것을 작성할 수 있으며, 개방형 인터페이스로 사용하려는 경우 data(){} 및 메소드 등을 . vue 파일에서 데이터는 이 구성 요소에 정의된 템플릿 데이터를 참조하며
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
login: function() {
console.log(this.username,this.password);
}
}
}
</script>저는 vue를 접한 지 얼마 안 됐어요. 배우는 가장 좋은 방법은 싸우면서 싸우는 것이라고 생각해요. 그렇지 않으면 차근차근 이해하는 것도 재미있을 거라 믿습니다. 이해해 주세요. 위에 내용 중 틀린 부분이 있으면 지적해 주시면 감사하겠습니다~
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트로!
관련 권장 사항:
VUEJS 2.0 하위 구성 요소 액세스/상위 구성 요소 호출vue-admin과 백엔드(flask)의 분리 및 결합에 대한 분석
위 내용은 .vue 파일 구문 분석 구현 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
