VUE는 구성 요소를 만들

첫째, 설명

어셈블리의 출현은, 코드 뷰 인스턴스의 양을 분할하고, 종류 우리가 필요로하는 기능, 당신은 해당 전화를 갈 수있는 미래에 다른 기능 모듈로 나누어, 다른 구성 요소에 우리를 허용 : 1. 어떤 구성 요소 구성 요소가 될 수있다;

2 부품과 모듈의 차이 :

　　모듈 : 코드는 논리적 뷰 포인트로부터 분리되고, 단층 코드 개발을 용이하게하고, 각 기능 모듈의 기능을 확인하는 단계;

　　의 요소 : 각도는 UI 인터페이스에서 분리되어 쉽게 재사용 UI 구성 요소를위한 프론트 엔드 구성 요소;

3주의 : 어떤 방법으로 구성 요소, 어셈블리 템플릿 내용의 포인트 재산의 템플릿 출력을 만들지 여부, 당신은 유일한 하나의 고유 한 루트 요소가 있어야합니다

둘째, 글로벌 구성 요소 코드를 정의

Vue.component와 방법을 사용 Vue.extend 1

　　1.1 Vue.extend 어셈블리 글로벌 뷰를 만들 수 있습니다

　　1.2 Vue.component (조립 템플릿 객체의 아웃 만든 '구성 요소의 이름')

　　Vue.component 구성 요소 이름은 낙타 표기법, 구성 요소를 참조 할 때 다음의 필요성이 두 단어, 사용하기 전에, 같은 시간에, 소문자 대문자를 고비하기 위해 사용되는 글로벌 구성 요소 정의하는 경우 1.3 - 링크;

　　당신이 고비를 사용하지 않는 1.4 경우, 이름은 직접 수행하는 데 사용;

< 바디 > 
  < DIV ID = "응용 프로그램" > 
    <! - 페이지에 HTML 태그의 형태로, 부품의 조립, 직접 이름을 사용하려면, 수 -> 
    < 내-COM1 > </ mycom1 > 
    < mycom1 > </ mycom1 >
   </ DIV >

  < 스크립트 > 
    // 1.1 Vue.extend 전체적인 어셈블리 뷰를 생성하는 데 사용 
    VAR을 COM1 = Vue.extend ({
      서식 : ' 요소를 사용하여 생성된다 <H3> Vue.extend </ H3> '  // 지정은 HTML 요소의 구조를 나타낸 것으로 특성 템플릿을 통해 
    })
     // 1.2 Vue.component ( '요소 이름' ) 조립 템플릿 개체 밖으로 만들어 
    Vue.component ( ' myCom1 ' , COM1)
     // 구성 요소 이름은 낙타 표기법을 사용하는 경우 구성 요소를 참조 할 때 Vue.component를 사용하는 경우 다음 글로벌 구성 요소를 정의, 혹의 대소 문자를 변경하는 것이 필요하다 소문자, 같은 시간에, 두 단어 전에 사용 - 링크; 
    // 당신이 고비를 사용하지 않는 경우, 이름을 직접 수행하는 데 사용, 
    Vue.component를 ( ' mycom1 ' , COM1)

    // Vue.component 첫 번째 인수 : 미래의 구성 요소의 이름 구성 요소 참조의 소개 라벨의 형태로 
    // 구성 요소 Vue.extend가 만든 템플릿이 미래의 구성 요소를 보여주기 인 : 두 번째 매개 변수를 HTML 콘텐츠 
    Vue.component ( ' mycom1 ' , Vue.extend ({
      서식 : ' 성분 Vue.extend </ H3> 사용하여 생성된다 <H3> '을
    }))


    // , 뷰 인스턴스를 만들기 뷰 모델을 제공하는 
    VAR VM은 =  새 새 {(뷰를
      에 : ' #app ' ,
      데이터 : {}
      방법 : {}
    });
  </ 스크립트 > 
</ 몸 >

2 만 Vue.component를 사용하여 구성 요소를 만들

< 바디 > 
  < DIV 언급 된 ID 위 = "응용 프로그램" > 
    <! - 또는 자신의 구성 요소를 도입, 라벨 양식을 사용 -> 
    < mycom2 > </ mycom2 >
   </ DIV >

  < 스크립트 > 
    // 참고 : 어떤 방법으로 구성 요소, 어셈블리 템플릿 내용의 포인트 재산의 템플릿을 작성할 것인지, 당신은 유일한 하나의 고유 한 루트 요소가 있어야합니다 
    Vue.component ( ' mycom2을 ' , {
      서식 : ' <div> <H3> 아웃 생성되는 어셈블리 직접 Vue.component </ H3> <SPAN> 123 </ SPAN> </ div> '
    })

    // , 뷰 인스턴스를 만들기 뷰 모델을 제공하는 
    VAR VM은 =  새 새 {(뷰를
      에 : ' #app ' ,
      데이터 : {}
      방법 : {}
    });
  </ 스크립트 > 
</ 몸 >

3, 템플릿 스마트 팁

< 몸 > 
  < DIV ID = "응용 프로그램" > 
    < mycom3 > </ mycom3 >
   </ DIV >

  <! - 템플릿 소자를 이용한 제어 외부 #app, HTML 템플릿 구조 정의 컴포넌트   -> 
  < 템플릿 ID = "tmpl는" > 
    < DIV > 
      < H1의 > 이 템플릿 요소로하고, 외부에서 정의 어셈블리 구조, 이런 식으로, 스마트 팁과 코드를 강조 </ H1 > 
      < H4 > 사용하기 쉬운, 좋은! </ H4 > 
    </ DIV > 
  </ 템플릿 >을

  < 스크립트 > 
    Vue.component ( ' mycom3 ' , {
      템플릿 : ' #tmpl '
    })
  </ 스크립트 > 
</ 몸 >

셋째, 구성 요소 코드는 개인 정의

 < 템플릿 ID = " tmpl2 " > 
    < H1의 > 이것이 개인 로그인 성분 </ H1의 > 
  </ 서식 >

  구성 요소 : { // 개인의 내부 구성 요소의 예를 정의 
        로그인 : {
          템플릿 : ' #의 tmpl2 '
        }
      },

VUE는 구성 요소를 만들

추천