1.Vue 일반적인 명령
1) V : 텍스트 : 업데이트 요소는 TextContent
2) V-HTML : 갱신 요소 innerHTML을
3) V-경우 : true의 경우, 태그는 현재 페이지에 출력됩니다
4) V-다른 : false의 경우, 현재 레이블이 페이지에 출력됩니다
5) V-쇼 : 디스플레이는 디스플레이 스타일 / 숨기기를 제어에 의해 제어됩니다
6) V-님으로 반복 / 결국리스트 표시 오브젝트 ()
7) V-에 : 바인드 이벤트 리스너, 일반적으로 단축 @
8) V-바인딩 : 힘 해석 적 표현식을 바인딩 같이 V 바인드 생략 약칭 될 수있다 :
9) V 모델 : 데이터 바인딩 양방향
10) REF : 오브젝트 액세스하여 고유 식별자 VUE 요소 객체를 지정이 속성 $의 ELS
11) V-망 : 방지 플래시 CSS 장착 [V-망 {디스플레이 : 없음}
2.test016.html
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-. 8">
<제목> 제목 </ 제목>
<스타일>
/ * 표시는 다음과 V-망토 레이블과 일치하기 전에 * /
/ * [V-망토] 스타일 선택기 속성 * /
[V-은폐 {
디스플레이 : 없음;
}
</ 스타일>
</ head>
<body>
<! -
일반적으로 명령어 내장
1) V : 텍스트 : 갱신 요소는 TextContent
2) V-HTML : 갱신 요소 innerHTML을
3) V-IF :. 사실, 태그가 출력하는 경우 페이지 현재
4) V-다른 : FALSE를, 태그가 출력하는 현재 페이지
5 ) V-표시 : 디스플레이 표시 스타일 / 숨기기 제어함으로써 제어된다
6) V-를 들어 어레이 / 오브젝트 (디스플레이하여 최종리스트) 이송
7) V-ON : 보통 @ 약칭 바인딩 이벤트 리스너
8) V-바인드 : 결합력 해석 적 표현식은 V 바인드 생략로 약칭 될 수있다
. 9) V 모델 :양방향 데이터 바인딩
10)는 REF : 오브젝트 액세스하여 고유 식별자 VUE 요소 객체를 지정이 속성 $의 ELS
11) V-망은 다음 CSS와 플래시 방지 [V-은폐 {디스플레이 : 없음}
->
<div ID = "예">
또한 <P REF = "콘텐츠"> 우 나이 장산 영웅! </ P>
<버튼을 클릭 = "힌트"@> 팁 </ 버튼>
<P V-망토> {{MSG}} </ P>
</ DIV>
<스크립트 유형 = "텍스트 / 자바 스크립트"를 SRC =. " ./js/vue.js "> </ script>
<script 타입 ="텍스트 / 자바 스크립트 ">
새로운 새로운 뷰 ({
EL '예 #'
데이터 {
MSG '조'
}
방법 {
힌트 ( ) {
의 // $ 심판 다수의
경고 (이. $의 refs.content.또한 TextContent)
}
}
})
</ script>
</ body>
</ HTML>
================================================== ========================
3. 사용자 정의 명령
이유를 설명, 당신도? 사용자 정의 명령을 필요로 내장 한
(가) 내장하기 때문에 명령이 모든 요구를 충족시킬 수 없다, 다중화하여 속도가 특히 높은 경우에는 상기 명령을 사용하여
1.test016 (2) .html 중에서
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-8.">
<제목> 제목 </ 제목>
<헤드 />
<body>
<! -
1. 글로벌 명령 레지스터 ( 모든 적용은 뷰 객체 )
// '마이 지침'명령 이름
Vue.directive ( '마이 지침'기능 (EL, 바인딩) {
el.innerHTML binding.value.toupperCase = ()
})
(2) 등록 된 지역 (지시 특정 뷰에 대한 )
지시자 {
'마이 지침'{
바인드 (EL, 바인딩) {
el.innerHTML binding.value.toupperCase = ()
}
}
}
3..사용 설명서
V-내-지침 = 'XXX'
->
<! -
수요 : 사용자 정의이 개 지침
1. 기능 V 텍스트를 입력하지만, 모두 대문자는 텍스트 위-V로 변환
V 텍스트 2. 기능 유형,하지만 소문자 텍스트 낮은-V로 변환
->
<div ID = "TEST1">
<P V-어퍼 텍스트 = "MSG1"> </ P>
<P V 저급 텍스트 = "MSG1"> </ P>
</ div>
<div ID = "TEST2">
<위 P-V 텍스트 = "MSG2"> </ P>
<P V 저급 텍스트 = "MSG2"> </ P>
</ div>
<script 타입 = "텍스트 / 스크립트의"SRC = ".. /js/vue.js "> </ SCRIPT>
<스크립트 유형 ="텍스트 / 자바 스크립트 ">
// 정의 글로벌 명령이
엘 // : 명령 태그가 이미지에있는 속성
// 바인딩 : 데이터 오브젝트에 대한 명령은 정보를 포함
뷰를 .directive ( '위 텍스트',함수 ( EL 바인딩 ) {
CONSOLE.LOG EL (바인딩)
el.textContent binding.value.toUpperCase = ()
})
뷰 새 새 ({
EL : '# 보면 test1',
데이터 : {
MSG1 : '을 CHANGE!의 만들기'
}
지시어 : { // 등록 지역 교육 의 TEST1 범위 VM의 현재 관리에서만 유효
// (일반적 속성 문자열 이름) 낮은 텍스트 속성 이름이 그렇게 다시 작성해야하는 이유 '낮은 텍스트' ,이 문자를 포함하고 있기 때문에 -
'낮은 텍스트'기능 (EL, 바인딩) {
el.textContent = binding.value.toLowerCase ()
}
}
})
새로운 새로운 뷰 ({
EL : '#의 TEST2'
데이터 : {
MSG2 '계십니까 그것을 그냥!'
}
})
</ 스크립트>
</ BODY>
</ HTML>
2. 페이지의 스크린 샷
많은!