Vue.js 연구는 열세 사용자 지정 구성 요소 노트

뷰에서 사용자 지정 구성 요소 수 있습니다.

1. 템플릿 (사용자 정의 HTML 내용)

　　나는이 다음과 같은 권장 방법으로 많은 정의가있다, HTML 도움말, 더 편리하고, 더 적은 오류가 발생하기 쉬운 있습니다.

　　그것은 주목해야한다 있습니다 :

　　　　별명 구성 요소 혹 명칭 myCom1이 태그를 작성하는 데 사용하는 경우 1.1 <내-COM1은> </ 내-COM1을>, 약간 문제, 소문자를 권장합니다.

　　　　HTML 컨텐트 1.2 템플릿 태그는 모든이에 포함되어야 바깥 쪽 , 당신이 개 가질 수 없습니다 요소 바깥 쪽 사업부 제거 다음 예제는, H3 및 H5 모두가 된 경우, 요소를 최 외층 및 불평 할 것이다 .

<div ID는 = " divApp " > 
        <! - 방식 맞춤 라벨 컴포넌트를 사용하여 -> 
        <mycom1> </ mycom1> 
    </ div> 
    <! - 컨텐츠 템플릿 정의 HTML 외부 요소에 의해 제어된다 - -> 
    <템플릿 ID = " TMP1 " > 
        <DIV> 
            <H3> 외부에서 정의 된 템플릿 조립 </ H3> 
            <H5> 예! </ H5> 
        </ div> 
    </ 서식> 
    <스크립트> // 성분 별명 정의 : mycom1 및 해당 템플릿 ID : TMP1 
        Vue.component ( ' mycom1 ' { 
            서식 : ' #의 TMP1 '
        

        뷰 ({ 
            엘 : ' #divApp ' , 
            데이터 : { 
            } 
            방법 : {} 
        })
     </ script>

다음은 내가 직접 함수로 작성된 HTML 콘텐츠를 넣어 뷰에 정의 할 수 있습니다 다음 구성 요소의 기능 인스턴스를 직접 정의와 독점적 인 구성 요소의 사용의 일반적인 구성 요소,하지만이 메시지가 표시되지 않기 때문에이 권장되지 않습니다.

VAR의 V = 새로운 새로운 뷰 ({ 
            EL : ' #divApp ' , 
            데이터 { 
            } 
            방법 {} 
            요소 { 
                mycom2 { 
                    // 템플릿 '# TMP2' 
                    틀 : ' 비공개 성분 </ H1> <의 H1> ' 
                } 
            } 
        })

같은 공통 구성 요소를 사용하지만 개인이기 때문에, 그것은 단지 컨트롤 컨테이너 뷰 인스턴스 정의에 사용할 수 있습니다.

<div의 ID = " divApp " > 
        <! - - 정의 라벨 컴포넌트 사용 방법> 
        <mycom1> </ mycom1> 
        <mycom2> </ mycom2> 
    </ div>을

2. 데이터

HTML 템플릿 정의 된 콘텐츠 데이터는 데이터 객체를 반환 성분이 함수임을 주목해야 데이터 부분을 정의 할 수 있고, 오브젝트 화상 데이터 뷰 인스턴스로 직접 기록 할 수 없다.

 // 성분 별명 정의 : mycom1 및 해당 템플릿 ID : TMP1 
        Vue.component ( ' mycom1 ' { 
            서식 : ' #의 TMP1 ' , 
            데이터 : 함수 () { 
                창 { 
                    MSG : " MSG 데이터 조립체 ' 
                } 
            } 
        })

사용되는 방법은 속성의 데이터 뷰 예를 호출처럼 라인 전화 간단한 템플릿 태그 직접 사용 {{}} 방법이지만, 단지 대응하는 템플릿 태그 그렇게 사용된다.

<템플릿 ID = " TMP1 " > 
        <div> 
            {{}} MSG
             <H3> 외부에서 정의 된 템플릿 어셈블리 </ H3> 
            <H5> 예! </ H5> 
        </ DIV> 
    </ 템플릿>

3.methods

예제 뷰에 기재된 구성은, 상기 방법을 정의 할

// 성분 별명 정의 : mycom1 및 해당 템플릿 ID : TMP1 
        Vue.component ( ' mycom1 ' { 
            서식 : ' #의 TMP1 ' , 
            데이터 : 함수 () { 
                창 { 
                    MSG : " MSG 데이터 조립체 ' 
                } 
            } 
            방법 : { 
                ChangeText () { 
                    다음은이 된 .msg은 = ' 나는 당신의 내용을 변경 ' ; 
                } 
            } 
        })

정확히 같은 사용

<DIV> 
            {{}} MSG
             <H3> 외부에서 정의 된 템플릿 조립 </ H3> 
            <H5> 예! </ H5> 
            <유형 =의 INPUT " 버튼 " 값 = " 나는 수정 점 " V-ON :의 Click = " ChangeText " /> 
        </ DIV>

열두 뷰 Ajax 요청을 시작 노트 Vue.js 연구

Vue.js 연구는 열세 사용자 지정 구성 요소 노트

추천