이번 포스트에서는 Vue에서 양방향 데이터 바인딩에 사용되는 v-model에 대해서 살펴보자.  <h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0..

이번 포스트에서는 배열(list)의 element, object의 property 등 반복적인 데이터를 렌더링할 때 사용되는 v-for directive에 대해서 살펴보자. v-for v-for v-for는 반복문을 사용하기 위한 directive 이다. list의 element나 object의 property를 이용해서 li 태그를 구성할 경우 아래와 같이 작성할 수 있다. 부모 요소가 아닌 반복될 요소에 v-for를 적용한다. {{index}}, {{value}} {{index}}, {{key}}, {{value}} 여기서 data는 model에서 expose 되는 데이터로 list(iterable) 또는 object일 수 있다. data가 list인 경우는 value와 함께 index 만 전달된다...

이번 포스트에서는 vue에서 조건문을 처리하기 위한 directive에 대해서 살펴보자. v-if 계열 v-if v-if는 당연히 true/false를 나타내는 조건에 따라 블록의 렌더링을 결정하는 directive이다. 한번이라도 프로그램에서 조건문을 써본 경험이 있다면 별도의 설명이 필요 없을것 같다. v-if 와 함께 v-else-if, v-else도 역시 세트로 제공된다. 바로 활용 예를 살펴보자. 아래와 같이 0과 true 를 갖는 age와 isCat이 있다고 생각해보자. 이제 나이 즉 age를 기준으로 화면에 표시되는 값이 달라져야 하는 경우라면 아래와 같이 template을 작성할 수 있다. 현재 나이는 {{age}} 이니까.. 미취학 미성년 성년 + 이제 age값의 변화에 따라서 생성되는 ..

이번 포스트에서는 v-bind로 시작하는 directive에 대해서 살펴보자. 본 내용에 들어가기 전에 directive의 기본 사용법을 다시 한번 상기시켜보자. v-bind v-bind?v-bind는 html의 속성에 model의 데이터를 연결할 때 사용된다. v-bind는 전달인자로 연결하려는 속성을 지정해주면 되고 편의상 v-bind는 생략하고 사용하기도 한다.v-bind:속성명=사용할값:속성명=사용할값 간단한 사용 예를 살펴보자. 다음의 코드는 기본형 값을 반응형으로 관리하기 위해서 ref로 label과 linkId를 선언하고 있고 link는 반응형 객체를 사용하기 위해 reactive를 사용하고 있다.이를 template에서 사용하면 아래와 같다.  {{label}}이 결과 생성되는 DOM..

반응성이란 데이터가 변경되었을 때 이를 감지하고 이에 반응하여 부가적인 동작을 수행하기 위한 성질이다.예를 들어 위와 같이 excel 수식을 작성한 후 A를 20으로 변경하면 이에 반응하여 Sum이 40으로 변경된다. 즉 데이터를 변경하면 화면이 변경되는 것이다. Vue는 이런 반응성 구현을 위해 Proxy API를 사용한다.https://goodteacher.tistory.com/524 [es2015]Proxy이번 포스트에서는 Vue.js등 프론트엔드 프레임워크 들에서 반응성을 위해 사용하는 Proxy에 대해서 살펴보자. 반응성이란? 반응성(Reactivity) 반응성이란 선언적인 방식으로 어떤 값에 대한 변경에goodteacher.tistory.com 이번 포스트에서는 반응성을 위한 ref와 reac..

Vue는 HTML 기반의 템플릿 구문을 사용하는데 렌더링된 DOM에 컴포넌트의 데이터를 결합해서 출력하는 방식이다. 이 템플릿을 사용하는 방식에는 text interpolation(보간법)과 다양한 directive 들이 사용된다.이번 포스트에서는 먼저 text interpolation에 대해서 살펴보자.<p style="text-align: left;" data-ke-size="..

이번 포스트에서는 간단한 Vue Application을 생성해보고 MVVM과의 연관성에 대해 살펴보자. Vue Application 생성 Vue와 MVVM 앞선 포스트의 내용을 바탕으로 인사말을 출력하는 간단한 Vue Application을 만들어보고 MVVM과의 관계에 대해 살펴보자. Vue는 createApp이라는 함수를 통해서 새로운 Vue 객체(root component)를 생성하는데 이 객체가 ViewModel에 해당하는 녀석이다. Vue 객체는 mount라는 함수를 통해서 화면 요소 즉 DOM과 연결되는데 DOM을 구성하고 있는 HTML을 View라고 한다. Composition API 형태로 작성할 때 Vue 객체에는 setup 함수를 통해서 component에서 필요한 로직을 작성한다. 이..