[vue.js] 본격 생존코딩! 밥벌이를 해보자! (1)

이르면 9월부터 vue.js를 사용하여 개발하게 되었다..

조금 갑작스럽지만, 원래 인생은 갑작스러운 법이니까, 차근차근 vue를 배워보도록 하자.

1) Data-Binding

Vue 인스턴스 생성시에 옵션으로 들어가는 필드들

• el: 뷰 인스턴스가 바인딩할 Dom노드
• data: 뷰인스턴스가 관리할 모델 데이터. 뷰에서 {{}} 라는 표현을 사용하면 모델 데이터와 연동된다.

javascript DOM API or JQuery처럼 View를 직접 조작하는것이 아니라 View와 바인딩 된 모델 데이터를 수정하면 뷰는 자동으로 렌더링이 일어난다.

 

콘솔창을 열어서 app.product = "Vue Rendering Test!!"를 입력하니까 자동으로 렌더링이 되어서 화면에 Vue Rendering Test가 표시되는것을 볼 수 있었다.

 

그동안은(그러니까 JQuery와 JS를 이용했을땐) DOM에 직접 접근하여 text노드를 조작해왔었다.

document.getElementById("app").innerText = "vue.js를 공부해요!!!";

 

하지만 vue는 View와 바인딩된 모델데이터의 값을 변경하면, 자동으로 렌더링 해준다는 의미다.

app.product = "vue.js를 공부해요!!!";

 

 

 

 

 

 

 

 

+ 곁다리

리액트는 VirtualDOM이라는 DOM과 연결되는 가상 모델을 정의하고, 이 모델 데이터를 변경하면 뷰가 바뀐다

뷰는 뷰 인스턴스 내부에 data라는 속성이 모델 데이터에 해당하고, 이 모델데이터를 변경하면 그 즉시 자동으로 렌더링되어 화면이 갱신된다.

2) Attribute Binding

"html의 속성에 vue 인스턴스의 data속성을 어떻게 연결해야하는가 --> 바인딩 문법"

DOM에서 Node는 3가지 값을 가진다. 

<p id="title">Hi</P>

• 엘리먼트 : p
• 속성 : id
• 자식노드 : Hi

예를들자면, id Attribute를 Vue의 data와 묶어주는것이 바인딩이다.

html attribute에 데이터 모델을 바인딩하는 방법은 <태그명 v-bind:속성명 ="data속성명">이다. 생략해서

<태그명 :속성명 = "data속성명"> 으로 사용해도 동일하다.

attribute중에 class와 style은 많이 사용되므로 class binding / style binding문법이 별도로 있다.

 

3) conditional rending

특정한 조건에 따라서 뷰를 다르게 보여주는것을 conditional 렌더링이라고 한다.

js에서는 조건연산자를 사용하여 이를 표현할 수 있다.

예를들어..

if( 일반회원인가요 ){

   "일반회원 html 동적으로 넣기"

}else{

  "SNS회원화면을 위해 html 동적으로 넣기"

}

vue에서는 conditional renderind를 가능하게 해주는 다양한 템플릿 문법들이 제공된다.

 

- template syntax 문법 : v-if and v-else

 

Attribute에 v-if는 js의 if문과 비슷하다. value로 받는 값이 참이면 if부분의 태그를 렌더링하고, 거짓이라면 v-else부분을 렌더링한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

- v-else-if

if와 else가 있다면 v-else-if v-else도 있다. 당연하게도. 글자와 동일하게 조건을  세가지 이상으로 나눌 수 있다.

 

4) list rendering

json 배열을 반복문을 사용하여 vue에 보여주고자 하는것이 목적이다. 리액트는 js문법을 가지고 구현하지만, vue에는 반복문을 지원해주는 "템플릿 문법"이 있다. 

 

- 스트링타입 배열 렌더링

data에 details라는 string배열이 있다. index는 배열의 인덱스가 필요한 경우 사용한다.

 

<태그명 v-for="item in collection"> {{ item }}</li>

<li v-for="flower in flowers"> {{ flower }}  </li>

4) 객체 타입 배열 렌더링

객체배열을 사용해서 접근 할 수도 있다.

:key속성을 이용해서 vue가 유니크한 dom에 접근하도록 해야하는것이 권장사항이라고는 하나 사실 무슨말인지 잘 와닿지가 않는다... 처음엔 DOM에 id attribute가 추가되는줄 알았는데 그게 아니였다. 아마 vue에서 내부적으로 사용하는 id인가보다.

 

 

 

 

참고 : https://eastflag.co.kr/vue/shop-cdn-link/vue-instance/