12 개 기본 구성 요소

1. 글로벌 구성 요소 만들기

렌더링 : 1, 새로운 구성 요소, 2. 인스턴스화 객체를 생성, 3. 통화 구성 요소

코드 :

<! DOCTYPE HTML > 
< HTML LANG = "EN"  > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > </ 타이틀 > 
    < 링크 타입 = "텍스트 / CSS" REL = "스타일" HREF = "" / > 
    < 스타일 유형 = "텍스트 / CSS" > 
        * { 
            여백 : 0 ; 
            패딩 : 0 ;
        
    
    < 스크립트 SRC에 = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ 스크립트 > 
</ 머리 > 
< 몸 > 
< DIV ID = "하나" > 
    <! - . 3 마지막 구성 요소를 호출 -> 
    < 버튼 - 카운터 > </ 버튼 - 카운터 > 
    < 버튼 - 카운터 > </ 버튼 - 카운터 > 
</ DIV > 
< 스크립트 유형 = "텍스트 / 자바 스크립트" > 
    // 첫 VUE 1. 버튼 - 카운터라는 새로운 구성 요소 정의 
    뷰를.성분 ( ' 버튼 대향' {
         // "정의 데이터 기능 = 데이터의 각 인스턴스는 독립적 반환 
        : 데이터 기능 () {
             반환 { 
                수 : 0 
            } 
        } 
        // 정의 구성 요소 템플릿 콘텐츠 
        : 템플릿을 ' + =의 Click : <버튼 ON-V를" COUNT는 + "> 내가 당신에 의해 클릭 {{COUNT}} 시간 </ 버튼> ' 
    }); 
    // 2. 다음 새 구성 요소가 포함 VUE는 VM의 변수를 인스턴스화 추가 
    VAR VM = 새로운 새로운 뷰 ({ 
        EL : ' #one ' , 
        데이터 {} 
    }) 
</ 스크립트 > 
</ 신체> 
</ HTML >

2. 지방 의회 만들기

코드 :

<! DOCTYPE HTML > 
< HTML LANG = "EN"  > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > </ 타이틀 > 
    < 링크 타입 = "텍스트 / CSS" REL = "스타일" HREF = "" / > 
    < 스타일 유형 = "텍스트 / CSS" > 
        * { 
            여백 : 0 ; 
            패딩 : 0 ;
        
    
    < 스크립트 SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ 스크립트 > 
</ 머리 > 
< 몸 > 
<! - 局部注册组件-> 
< DIV ID = "이" > 
    < button_local > </ button_local > 
</ DIV > 
< 스크립트 유형 = "텍스트 / 자바 스크립트" > 
    var에 vm_local =  새로운 뷰 ({ 
        엘 : ' #two ' , 
        데이터 :{ 
            인포 :' 하 ' 
        }, 
        구성 요소 : { 
            button_local : { 
                템플릿 : ' 哈哈</ H1> <H1 @ 클릭이 = "추가"> ' , 
                메소드 : { 
                    추가 기능 () { 
                        경고 ( ' 你好! ' ) 
                    } 
                } 
            } 
        } 
    }) 
</ 스크립트 > 
</ 바디 > 
</ HTML >

12 개 기본 구성 요소

추천