vue.js의 템플릿은 dom을 기반으로 구현됩니다. 이는 모든 vue.js 템플릿이 파싱 가능하고 유효한 HTML이며 일부 특수 기능에 의해 향상되었음을 의미합니다. 따라서 VUE 템플릿은 현악기 기반 템플릿과 근본적으로 다르므로이를 명심하십시오.
보간
텍스트
데이터 바인딩의 가장 기본적인 형태는 "콧수염"구문을 사용하는 텍스트 보간입니다.
<span> 메시지 : {{msg}} </span>
콧수염 태그는 해당 데이터 객체의 MSG 속성 값으로 대체됩니다. 이 속성이 변경 될 때마다 업데이트됩니다.
단일 보간 만 처리 할 수 있으며 향후 데이터 변경은 더 이상 보간 업데이트를 유발하지 않습니다.
<span> 이것은 결코 변하지 않습니다 : {{* msg}} </span>
원래 HTML
듀얼 콧수염 태그는 데이터를 HTML 대신 일반 텍스트로 구문 분석합니다. 실제 HTML 문자열을 출력하려면 3 개의 콧수염 태그를 사용해야합니다.
<div> {{{raw_html}}} </div>
컨텐츠는 HTML 문자열로 삽입됩니다. 데이터 바인딩은 무시됩니다. 템플릿 조각을 재사용 해야하는 경우 부분을 사용해야합니다.
[xss 공격] (https://en.wikipedia.org/wiki/cross-site_scripting)이 있기 때문에 웹 사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 매우 위험합니다. 신뢰할 수있는 컨텐츠에만 HTML 보간물을 사용하고 사용자가 제출 한 콘텐츠에는 사용하지 마십시오.
HTML 기능
콧수염 태그는 HTML 속성에서도 사용할 수 있습니다.
<div id = "항목-{{id}}"> </div>
보간은 vue.js 지침 및 특수 기능 내에서 사용할 수 없습니다. 콧수염 태그가 잘못된 장소에서 사용되면 vue.js는 경고를합니다.
표현을 바인딩합니다
콧수염 태그에 배치 된 텍스트를 바인딩 표현이라고합니다. vue.js에서, 결합 된 표현식은 간단한 JavaScript 표현식 및 선택적으로 하나 이상의 필터로 구성됩니다.
자바 스크립트 표현
지금까지 템플릿은 간단한 속성 키에만 연결되어 있습니다. 그러나 실제로 vue.js는 데이터 바인딩에서 완전한 기능을 갖춘 JavaScript 표현을 지원합니다.
{{번호 + 1}}
{{ 좋아요 ? '예': '아니요'}}
{{message.split ( ''). Reverse (). join ( '')}}
이러한 표현은 그들이 속한 VUE 인스턴스의 범위 내에서 평가됩니다. 한 가지 제한 사항은 각 결합이 단일 표현 만 포함 할 수 있으므로 다음 진술은 유효하지 않다는 것입니다.
<!-이것은 표현이 아니라 진술입니다.->
{{var a = 1}}
<!-프로세스 제어는 불가능합니다. 대신 3 원 표현을 사용할 수 있습니다.
{{if (ok) {return message}}}
필터
vue.js는 표현식 후 "파이프 라인 문자"를 나타내는 옵션 "필터"를 추가 할 수 있습니다.
{{메시지 | 자본화}}
여기서 우리는 내장 자본화 필터에 표현 메시지 "파이프"의 값을 사용합니다. 이 필터는 실제로 자본화 된 값을 반환하는 JavaScript 함수 일뿐입니다. vue.js는 몇 가지 내장 필터를 제공하며 나중에 자체 필터를 개발하는 방법에 대해 이야기 할 것입니다.
파이프 구문은 JavaScript 구문이 아니므로 표현식 내에서 필터를 사용할 수 없으며 표현식의 후에 만 추가 할 수 있습니다.
필터는 직렬로 연결할 수 있습니다.
{{메시지 | Filtera | Filterb}}
필터는 또한 매개 변수를 허용 할 수 있습니다.
{{메시지 | Filtera 'arg1'arg2}}
필터 함수는 항상 표현식 값을 첫 번째 매개 변수로 취합니다. 인용 된 주장은 문자열로 취급되는 반면, 인용되지 않은 인수는 표현으로 계산됩니다. 여기서, 문자열 'arg1'은 필터로 두 번째 매개 변수로 전달되며, 표현식 arg2의 값은 세 번째 매개 변수로 계산됩니다.
지침
지시문은 접두사 V-의 특수 기능입니다. 지침의 값은 바인딩 식으로 제한되므로 위에서 언급 한 JavaScript 표현 및 필터 규칙도 여기에 적용됩니다. 지시의 책임은 표현의 가치가 변할 때 특정 특수 행동을 DOM에 적용하는 것입니다. "개요"의 예를 앞뒤로 살펴 보겠습니다.
<p v-if = "인사"> 안녕하세요! </p>
여기서 V-IF 지침은 표현식 인사 값의 진위에 따라 <p> 요소를 삭제/삽입합니다.
매개 변수
일부 지침은 이름의 이름과 중간에 "인수"로 분리 될 수 있습니다. 예를 들어, V-BIND 지침은 HTML 기능을 반응 적으로 업데이트하는 데 사용됩니다.
<a v-bind : href = "url"> </a>
여기서 href는 v-bind 지시문이 요소의 href 속성을 표현식 URL의 값에 바인딩하도록 지시하는 매개 변수입니다. 어쩌면 기능 보간 { % raw %} href = "{{url}}"{ % endRaw %}를 사용할 수 있다는 것을 알았을 수도 있습니다. 동일한 결과를 얻으려면 다음과 같은 결과가 맞습니다. 실제로 내부 기능 보간이 V- 바인드 바인딩으로 변환됩니다.
또 다른 예는 V-ON Directive이며 DOM 이벤트를 듣는 데 사용됩니다.
<a v-on : 클릭 = "dosomething">
이 매개 변수는 듣는 이벤트의 이름입니다. 또한 이벤트 바인딩을 자세히 설명 할 것입니다.
수정 자
수정자는 반 폭 기간으로 시작하는 특수 접미사입니다. 그들은 지시 사항이 특별한 방식으로 구속되어야 함을 나타내는 데 사용됩니다. 예를 들어, .literal modifier는 값을 표현 대신 문자 그대로 문자열로 구문 분석하라는 지침을 지시합니다.
<a v-bind : href.literal = "/a/b/c"> </a>
물론 단일 명령어를 사용하지 않고도 href = "/a/b/c"를 사용해야하기 때문에 이것은 의미가없는 것 같습니다. 이 예제는 단지 구문을 보여주는 것입니다. 나중에 우리는보다 실용적인 수정자를 볼 수 있습니다.
약어
V-prefix는 템플릿에서 특정 VUE 기능을 식별하는 시각적 힌트입니다. 이러한 접두사는 기존 HTML 코드에 동적 동작을 추가해야 할 때 좋은 차이가 될 수 있습니다. 그러나 몇 가지 일반적인 지침을 사용하면 항상 현실적이고 장악하다고 느낄 것입니다. 또한 단일 페이지 응용 프로그램 (SPA)을 구축 할 때 vue.js는 모든 템플릿을 관리하며 V- 접두사가 현재 그렇게 중요하지는 않습니다. 따라서 vue.js는 가장 일반적으로 사용되는 두 가지 지시문 v-bind 및 v-on에 대한 특별 약어를 제공합니다.
V- 바인드 약어
<!-완전한 구문-> <a v-bind : v-bind : href = "url"> </a> <!-약어-> <a : href = "url"> </a> <!-완료 구문-> <버튼 v-bind : disabled = "somedynamicCondition"> button> <!-Abbreviation-> <somedibult = ""somedynamamicCondition ">
V-on 약어
<!-완료 구문-> <a v-on : 클릭 = "dosomething"> </a> <!-약어-> <a @click = "dosomething"> </a>
그들은 "법적"HTML과 조금 다르게 보이지만 모든 vue.js 지원 브라우저에서 정확하게 구문 분석되며 최종 렌더링 된 태그에는 나타나지 않습니다. 약어 문법은 완전히 선택 사항이지만 단계별로 학습 할 때이를 기쁘게 생각합니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.