.vue 파일 생성 및 사용 예시 공유

요즘 새로운 프로젝트는 vue2.0으로 개발되고 있습니다. 이전에 vue를 사용해 본 적이 없기 때문에 프로젝트 프레임워크를 받으면 .vue 파일이 모두 표시됩니다. 이 글에서는 주로 vue2에서의 .vue 파일 생성 및 사용을 소개합니다. 0 개발 소개 노트. , 매우 실용적인 가치, 도움이 필요한 친구들이 참고할 수 있습니다. 모두에게 도움이 되기를 바랍니다.

사용 방법을 모르겠습니다. .vue 파일에 대해 제가 알아낸 내용은 다음과 같습니다.

1. .vue 파일에는 html, css를 작성할 수 있습니다. , js

템플릿에 HTML 코드를 작성하는 것은 실제로 템플릿을 정의하는 것입니다.

2. 각 .vue의 스타일은 선택한 조건을 충족하는 한 동일한 선택기가 다른 .vue에서 작동할 수 있습니다. 예를 들어 화살표로 가리키는 파일에 .box{ width: 스타일을 정의했습니다. 1. 200px; }, 화살표 2가 가리키는 파일에 .box가 있으면 파일에서 스타일을 재정의하고 덮어쓰지 않는 한 .box{ width:200px } 는 화살표 2가 가리키는 파일에서도 작동합니다. 화살표 2로 가리킨다.

3. .vue 단일 파일을 사용하지 않는 경우 Vue 생성자를 통해 Vue 루트 인스턴스를 생성하여 vuejs를 시작합니다. .vue 파일에서는 Vue로 인스턴스를 생성할 필요가 없으며 내보내기 기본값을 사용합니다. .vue 파일의 기본값 내보내기 후의 개체는 new Vue() 생성자에서 허용되는 개체와 동일합니다:

즉:

<script>
  export default{
    data:function(){
      return {
        //返回一个对象
      }
    },
    methods:{
      //定义方法
    }
  }
</script>

4 등을 도입할 수 있습니다.

5 .route.js에서 점프 경로를 설정할 때 특정 폴더의 index.vue 파일로 전송할 경우 폴더 뒤의 index.vue를 생략할 수 있습니다. 이 파일로 이동하려는 경우:

다음 두 문장은 동일합니다.

따라서 일반적으로 폴더 뒤의 index.vue는 생략됩니다.

관련 권장 사항:

.vue 파일의 입력 입력 이벤트를 모니터링하기 위한 oninput에 대한 자세한 설명

Vue.js_vue.js의 *.Vue 파일에 대한 첫 소개

Webstorm의 새로운 .vue 파일은 강조 표시를 지원합니다. vue 구문과 es6 구문

위 내용은 .vue 파일 생성 및 사용 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!