집 >웹 프론트엔드 >JS 튜토리얼 >.vue 파일 구문 분석 구현 정보

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

不言원래의: 2018-06-29 16:39:421349검색

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

vue 단일 파일

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

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

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

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

<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 구조는 dcdc0fa59b5fea5bdae0d810c3919fcd 태그 아래에 작성할 수 있으며 dom 구조의 스타일 파일은 ed726c0553f80df67b80cc4b1ffbdc56 태그가 존재합니다. DOM 구조를 제어하는 동일한 스크립트가 다른 형제 요소인 7239f9c7b7d151b366b41e07a1e7636c에 작성되므로 각 구성요소의 해당 구조 스타일이 동일 파일에 포함됩니다. 다른 구성 요소.

공식 hello.vue 인스턴스

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

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

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

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

변수, 메소드, 객체 등을 포함하여 많은 것을 작성할 수 있으며, 개방형 인터페이스로 사용하려는 경우 data(){} 및 메소드 등을 . vue 파일에서 데이터는 이 구성 요소에 정의된 템플릿 데이터를 참조하며 d1b23b4775d0447f282b5db359c1144b과 같이 dcdc0fa59b5fea5bdae0d810c3919fcd의 요소에 클릭 메서드를 바인딩하면 다음과 같을 수 있습니다. 다음:

<script>
export default {
 name: &#39;hello&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 }
 },
 methods: {
   login: function() {
    console.log(this.username,this.password);
   }
  }
}
</script>

저는 vue를 접한 지 얼마 안 됐어요. 배우는 가장 좋은 방법은 싸우면서 싸우는 것이라고 생각해요. 그렇지 않으면 차근차근 이해하는 것도 재미있을 거라 믿습니다. 이해해 주세요. 위에 내용 중 틀린 부분이 있으면 지적해 주시면 감사하겠습니다~

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트로!

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

관련 기사