vue 2.0 개발 입문 노트 의 vue 파일 생 성 및 사용

2136 단어 .vue문건
요 며칠 동안 새로운 프로젝트 는 vue 2.0 으로 개발 되 었 습 니 다.이전에 vue 를 사용 한 적 이 없 기 때문에 프로젝트 프레임 워 크 를 가 져 오 면 모두 vue 파일 입 니 다.
这里写图片描述
어떻게 사용 해 야 할 지 모 르 겠 습 니 다.다음은.vue 파일 에 대한 발견 입 니 다.
1.vue 파일 은 봉 인 된 구성 요소 입 니 다.vue 파일 에 html,css,js 를 쓸 수 있 습 니 다.
这里写图片描述
그 중에서 template 에 html 코드 를 쓰 는데 사실은 템 플 릿 을 정의 하 는 것 입 니 다.
2.각.vue 사이 의 스타일 은 독립 적 이지 않 습 니 다.같은 선택 기 는 서로 다른.vue 에서 선택 한 조건 만 만족 시 키 면 작 동 합 니 다.예 를 들 어 화살표 1 이 가리 키 는 파일 에서 스타일 을 정 의 했 습 니 다.box{width:200 px;}.화살표 2 가 가리 키 는 파일 에 도.box 가 있다 면.box{width:200 px;}화살표 2 의 파일 에서 도 스타일 을 다시 정의 하고 덮어 쓰 지 않 는 한 화살표 2 의 파일 에서 도 역할 을 합 니 다.
这里写图片描述
3.vue 단일 파일 을 사용 하지 않 을 때 Vue 구조 함 수 를 통 해 Vue 루트 인 스 턴 스 를 만들어 vues 를 시작 합 니 다.vue 파일 에서 Vue 로 인 스 턴 스 를 만 들 지 않 고 export default 을 사용 합 니 다.vue 파일 에서 export default 뒤의 대상 은 new Vue()구조 함수 에서 받 아들 이 는 대상 에 해당 합 니 다.
这里写图片描述
즉:

<script>
  export default{
    data:function(){
      return {
        //      
      }
    },
    methods:{
      //    
    }
  }
</script>
4.less 등 을 도입 할 수 있다.
这里写图片描述
5.route.js 에서 이동 경 로 를 설정 하 는 것 은 특정한 폴 더 아래 index.vue 파일 로 이동 하면 폴 더 뒤의 index.vue 를 생략 할 수 있 습 니 다.이 파일 로 이동 하려 면:
这里写图片描述
다음 두 마디 는 등가 이다.
这里写图片描述
这里写图片描述
그래서 보통 폴 더 뒤의 index.vue 를 생략 합 니 다.
이.vue 의 구성 요소 응용 에 도움 이 되 기 를 바 랍 니 다.많은 응원 부 탁 드 리 겠 습 니 다.

좋은 웹페이지 즐겨찾기