머리말
vue.js는 데이터 중심 웹 인터페이스 라이브러리입니다. vue.js는 뷰 레이어에만 초점을 맞추고 다른 라이브러리와 쉽게 통합 될 수 있습니다. 압축 후 코드는 24KB에 불과합니다.
다음 코드는 vue.js의 가장 간단한 예입니다. 입력의 내용이 변경되면 P 노드의 내용이 변경됩니다.
<!-html-> <div id = "demo"> <p> {{message}} </p> <입력 v-model = "messagvue.js의 기본 구문
텍스트를 삽입하십시오
<span> 메시지 : {{text}} </span>HTML 형식으로 텍스트를 삽입하고 페이지에 HTML 형식으로 표시합니다.
<span> 메시지 : {{{html}}} </span>콘텐츠는 데이터 변경을 따르지 않습니다
<span> 메시지 : {{ * text}} </span>속성에 대한 데이터를 바인딩합니다
<div id = "항목-{{id}}"> </div>{{}}에서 js 표현식 사용
{{번호 + 1}} {{OK? '예': 'no'}} {{message.split ( ''). reverse (). join ( '')}}{{}}에서 JS 문을 사용
{{var a = 1}} {{if (ok) {return message}}}IF 명령
<p v-if = "Greeting"> hello! </p> 여기서 v-if 지시문은 표현식 인사 값의 진위에 따라 <p> 요소를 삭제/삽입합니다.
HREF 지침
<a v-bind : href = "url"> </a> 또는 <a href = "{{url}}"> </a>명령을 클릭하십시오
<a v-on : 클릭 = "dosomething">
명령을 입력하십시오
<input v-model = "newtodo"v-on : keyup.enter = "addtodo">
약어
V- 바인드
<!-완전한 구문-> <a v-bind : v-bind : href = "url"> </a> <!-약어-> <a : href = "url"> </a> <!-완료 구문-> <버튼 v-bind : disabled = "somedynamicCondition"> button> <!-Abbreviation-> <somedibult = ""somedynamamicCondition ">
V- 온
<!-완료 구문-> <a v-on : 클릭 = "dosomething"> </a> <!-약어-> <a @click = "dosomething"> </a>
요약
템플릿의 표현식은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. 템플릿은보기의 구조를 설명하는 것입니다. 너무 많은 논리를 템플릿에 넣으면 템플릿을 너무 무겁고 유지 관리하기가 어려울 수 있습니다. 이것이 바로 Vue.js가 바인딩 표현을 하나의 표현으로 제한하는 이유입니다. 둘 이상의 표현이 필요한 경우 계산 된 특성을 사용해야합니다. 편집자는 나중에 계산 된 속성을 사용하는 방법을 업데이트합니다. 관심있는 친구, Wulin.com에 계속주의를 기울이십시오.