Vue.js Tutorial - Instance, Binding, Conditional Rendering

https://www.vuemastery.com/courses/intro-to-vue-js

Intro to Vue.js - Intro to Vue.js | Vue Mastery

 

---

1. The Vue Instance

HTML 내에 데이터를 전달하여 사용하고 싶을 때 -> Vue를 이용한다

CDN 방식을 이용하여 HTML 내에 뷰를 삽입할 수 있다.

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

 

<div id="app">
 <h1>product</h1>
</div> 

 

위와 같은 태그들을 뷰를 이용해서 데이터를 전달하려면

먼저 Vue Instance를 생성해야 한다.

 

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks'
  } 
})

 

Vue Instance는 위와 같이 모양으로 작성한다.

el은 태그의 아이디를 적어주고 아이디가 있어야 그 태그 내에서 인스턴스의 데이터를 가져다 사용할 수 있다.

 

<div id="app">
 <h1>{{ product }}</h1>
</div> 

 

h1 태그 내에서 < Expression >을 이용하여 데이터를 사용한다.

Expression은 존재하는 데이터 값들을 로직에서 사용하고 또 다른 데이터를 생성하는 데 사용한다.

Vue는 reactive하다는 특징이 있기 때문에 참조된 데이터 값이 변하면 HTML 내에 데이터도 변경된다.

 

결론

•  Vue 인스턴스는 모든 Vue 어플리케이션의 루트
• Vue 인스턴스는 DOM에 있는 엘리먼트와 연결된다 (el 프로퍼티)
• mustache-like syntax {{ }}의 표현으로 데이터가 표현된다.

 

---

2. Attribute Binding

태그 사이에 데이터를 사용하는 것은 1에서 다뤘다.

태그 내 속성으로 인스턴스의 데이터를 사용하고 싶을 때는 어떻게 해야 할까?

-> Data Binding!

 

Vue에서 데이터 바인딩이란, 뷰 인스턴스 내 데이터 객체와 보여지는 템플릿과 directly 연결되는 것

 

The host of the data is linked to the target of the data

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>
    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>  
</div> 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

 

// JS
var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'
  } 
})

 

img 태그의 src 속성과 app이라는 뷰 인스턴스의 image 값이 바인딩 된다.

v-bind: 로 쓰거나 짧게 : (콜론)만 써도 된다.

 

---

3. Conditional Rendering : v-if, v-show

특정 조건이 충족되는 지에 따라 특정 태그를 보이게 할 수도 있고 안보이게 할 수 도 있다. 이를 조건부 렌더링이라고 한다.

조건을 조절할 변수를 데이터 오브젝트 내에 새로운 프로퍼티로 추가해준다.

 

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
    inStock: true
  } 
})

 

이제 inStock의 값에 따라 <p> 태그를 보이게 하거나 보이지 않게 한다.

 

<div class="product-info">
	<h1>{{ product }}</h1>
	<p v-if="inStock">In Stock</p>
	<p v-else>Out of Stock</p>
</div>

 

inStock이 true이므로 if 문이 만족되어 'In Stock'이 보이고, Out of Stock은 보이지 않는다.

else if 를 사용하고 싶을 때는 아래와 같이 코드를 작성한다.

 

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock > 10">In Stock</p>
      <p v-else-if="inStock <= 10">Almost sold out!</p>
      <p v-else>Out of Stock</p>
    </div>

 

if 문 외에도 v:show가 있다.

페이지 내에서 on, off 토글을 자주 하는 경우 사용하기 좋은 표현이다.

v-show 이후에 나오는 데이터가 참인지, 거짓인지에 따라 보이거나 보이지 않는다.

거짓인 경우에는 해당 태그의 CSS 속성 중 display를 none으로 설정한다.

하지만 DOM 내부에서 제거되는 것은 아니다.

 

---

4. List Rendering

 

배열의 원소들을 나열하고 싶을 때는 일일이 태그를 작성하는 것보다

v-for를 사용하여 효율적으로 간단하게 나타낼 수 있다.

 

보통 코딩하듯이 for 문처럼 el in elements 이런 식으로 "" 내부에 써주면 된다.

<div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In Stock</p>
      <p v-else>Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>

      <div v-for="variant in variants" :key="variant.variantId">
        <p>{{ variant.variantColor }}</p>
      </div>

</div>  

 

객체 형식으로 담긴 데이터들은 . 을 통해 접근이 가능하다.

또한 태그들이 반복될 때는 유니크한 값을 key로 전달한다. (권장)

 

 

 

---