반응형 vuejs4 vue.js - 6.조건문(v-if, v-else, v-else-if, v-show) 디렉티브 ●v-if, v-else, v-else-if, v-else - 표현그대로 조건문이다. 조건을 만족하면 랜더링을 해서 보여주고, 조건을 만족하지 않으면 랜더링을 하지않는다. ●v-show - 특정조건을 만족하면 보여주고, 만족하지 않으면 display:none 해서 보여주지 않는다. - 화면엔 보이지 않아도 실제론 랜더링을 하기 때문에 화면이 자주 변경되는 부분에 대해선 v-if보단 v-show를 써주는게 좋다. ex) {{text}} 100초과 100점 나머지 100초과하였습니다. 2021. 8. 1. vue.js - 5. v-bind, v-model 디렉티브 ●v-bind 디렉티브 - v-bind는 html의 속성을 설정할 때 사용한다. - 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src) ex) {{text}} ●v-model 디렉티브 - v-text, v-html등은 모두 단방향 디렉티브이다. - v-model은 사용자가 입력한 값으로 모델의 값을 바인딩 해주는 양방향 디렉티브이다.. ex) {{text}} 벤츠, bmw, 아우디, 페라리, 람보르기니 선택한 자동차: 2021. 8. 1. vue.js - 4. v-text, v-html 디렉티브 ●디렉티브란 - 디렉티브는 번역하면 '지시문'이라는 뜻으로 vue의 문법이라고 생각하면 된다. ●샘플소스 {{text}} {{text2}} ●v-text 디렉티브 - 자바스크립트의 innerText 와 같은 역할을 한다. - html태그가 적용되지 않고 문자열이 그대로 보여진다. ●v-html 디렉티브 - 자바스크립트의 innerHTML 과 같은 역할을 한다. - html태그가 적용된 화면이 보여진다. 2021. 8. 1. vue.js - 3.vue기본구조(MVVM) ●샘플예제 ex)소스 {{text}} ●vue,js 기본구조(MVVM) - 모델 객체는 데이터를 가지고 있다. - view 안에서는 {{ }} 와 같은 표현식을 사용하여 HTML DOM에 데이터를 랜더링한다. 콧수염 모양을 닮았다고 하여 콧수염 표현식(Mustache Expresstion)이라고 부른다. - vue객체(VIewModel객체)는 HTML요소와 모델을 참조하고 있다. vue객체의 el속성은 HTML의 요소(element)를 뜻한다. view의 요소를 바라본다. data속성은 모델 객체를 참조한다. - 모델의 데이터를 변경하면 vue객체를 통해 HTML DOM이 즉시 반영되어 view의 값이 변경된다. 2021. 8. 1. 이전 1 다음 반응형
