챌린지 40일 차. 챌린지 앞자리가 드디어 4가 되었다. 그말인 즉슨 진짜 얼마 안남았다는 이야기.
Vue.js 템플릿 문법
보간법(Interpolation)
데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)이다.
<span>메시지: {{ msg }}</span>
위와 같이 Mustache 태그( {{ msg }} , 중괄호를 두 번 )는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다. 또한 msg 속성이 변경될 때 마다 갱신된다.
v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있다. 다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다.
<span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>
위와 같이 이중의 중괄호를 사용하는 일회성 보간을 사용하였을 때 v-once 디렉터를 사용한다면 데이터가 변경되더라도 화면은 바뀌지않는 구조를 만들 수 있다.
HTML 클래스 바인딩
HTML 클래스 속성에 데이터를 바인딩(연결)을 하는데 객체 구문으로 해당하는 내용들을 연결할 수 있다. v-bind:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다.
<div :class="{ active: isActive }"></div>
우리는 v-bind의 약어로 : 하나만을 사용하게된다. div요소의 class라는 속성에 :로 데이터를 연결하여 쓰는데, 해당 데이터는 객체이며 ( { ~~ } ) 객체의 keyvalue형태로 active라는 클래스를 isActive 데이터와 연결한다. isActive라는 데이터가 true이면 active라는 class가 연결이 되는 것이고 false라면 연결이 되지 않는 형태이다.
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online
