Vue.js 학습 노트(3)

2368 단어
템플릿 구문
Vue.js는 HTML 기반 템플릿 문법을 사용하여 개발자가 DOM을 밑에 있는 Vue 실례의 데이터로 성명식으로 연결할 수 있도록 합니다.모든 Vue.js의 템플릿은 모두 합법적인 HTML이기 때문에 규범화된 브라우저와 HTML 해상도에 따라 해석될 수 있습니다.기본 구현에서 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일합니다.
삽입값
텍스트
데이터 바인딩의 가장 일반적인 형태는 Mustache 구문(중괄호)을 사용한 텍스트 보간입니다.
Message: {{ msg }}

Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체됩니다.언제든지 연결된 데이터 대상에 msg 속성이 변경되어 삽입된 부분의 내용이 업데이트됩니다.v-once 명령을 사용하면 데이터가 바뀌면 삽입된 부분의 내용이 업데이트되지 않습니다.그러나 이는 노드의 모든 데이터 바인딩에 영향을 미칩니다.
       : {{ msg }}

원시 html
중괄호는 데이터를 HTML 코드가 아닌 일반 텍스트로 해석합니다.진정한 HTML을 출력하려면 v-html 명령을 사용해야 합니다.

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。

特性

mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

这同样适用于布尔类特性，如果求值结果是 falsy 的值 ，则该特性将会被删除：

주: 값을 구한 결과falsy의 값입니다.
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all) [1]

javascript 표현식 사용하기
모든 데이터 바인딩에 대해 Vue.js는 모든 JavaScript 표현식 지원을 제공합니다.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

每个绑定都只能包含单个表达式


{{ var a = 1 }}

{{ if (ok) { return message } }}

명령어
명령(Directives)은 v-접두어가 있는 특수 속성입니다.

매개 변수
v-bind 명령을 사용하여 HTML 속성을 응답식으로 업데이트할 수 있습니다.

DOM 이벤트를 수신하는 데 사용되는 v-on 명령:

수식부
수정자 (Modifiers) 는 반각 마침표이다.지시된 특수 접미사는 명령이 특수한 방식으로 귀속되어야 한다는 것을 지적하는 데 쓰인다.prevent 수식자는 v-on 명령이 촉발하는 이벤트에 대한 이벤트를 호출합니다.preventDefault():
缩写
v-bind 缩写

줄임말
MySQL 자동 페 일 오 버 기능 테스트
자바 반사:자바 방법 반사 기본 조작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage