HTML ํ๊ทธ ์์ v-์ ๋์ฌ๋ฅผ ๊ฐ์ง๋ ๋ชจ๋ ์์ฑ์ ์๋ฏธ.
<a v-if="flag">๋ฆ๋น</a>
์ฃผ์ ๋๋ ํฐ๋ธ
๋๋ ํฐ๋น ์ด๋ฆ | ์ญํ |
---|---|
v-if | ์ง์ ํ ๋ทฐ ๋ฐ์ดํฐ ๊ฐ์ ์ฐธ ๊ฑฐ์ง ์ฌ๋ถ์ ๋ฐ๋ผ ํด๋น HTML ํ๊ทธ๋ฅผ ํ๋ฉด์ ํ์ํ๊ฑฐ๋ ํ์ํ์ง ์์ |
v-for | ์ง์ ํ ๋ทฐ ๋ฐ์ดํฐ์ ๊ฐ์๋งํผ ํด๋น HTML ํ๊ทธ๋ฅผ ๋ฐ๋ณต ์ถ๋ ฅ |
v-show | v-if์ ์ ์ฌํ๊ฒ ๋ฐ์ดํฐ์ ์ง์ ์ฌ๋ถ์ ๋ฐ๋ผ ํด๋น HTML ํ๊ทธ๋ฅผ ํ๋ฉด์ ํ์ํ๊ฑฐ๋ ํ์ํ์ง ์์. ๋ค๋ง, v-if๋ ํด๋น ํ๊ทธ๋ฅผ ์์ ํ ์ญ์ ํ์ง๋ง v-show๋ css ํจ๊ณผ๋ง display:none;์ผ๋ก ์ฃผ์ด ์ค์ ํ๊ทธ๋ ๋จ์ ์๊ณ ํ๋ฉด ์์ผ๋ก๋ง ๋ณด์ด์ง ์์ |
v-bind | HTML ํ๊ทธ์ ๊ธฐ๋ณธ ์์ฑ๊ณผ ๋ทฐ ๋ฐ์ดํฐ ์์ฑ์ ์ฐ๊ฒฐ |
v-on |
ํ๋ฉด ์์์ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ์ฌ ์ฒ๋ฆฌ ํ ๋ ์ฌ์ฉ. ex) v-on:click์ ํด๋น ํ๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ์ฌ ํน์ ๋ฉ์๋๋ฅผ ์คํํ ์ ์๋ค. |
v-model | form์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ ์์ฑ. ํผ์ ์ ๋ ฅํ ๊ฐ์ ๋ทฐ ์ธ์คํด์ค์ ๋ฐ์ดํฐ์ ์ฆ์ ๋๊ธฐํ. ํ๋ฉด์ ์ ๋ ฅ๋ ๊ฐ์ ์ ์ฅํ์ฌ ์๋ฒ์์ ๋ณด๋ด๊ฑฐ๋ watch์ ๊ฐ์ ๊ณ ๊ธ ์์ฑ์ ์ด์ฉํ์ฌ ์ถ๊ฐ ๋ก์ง ์ํ๊ฐ๋ฅ. |
v-for
<li v-for = (todoItem, index) in todoItems></li>
todoItems ์์ ๋ฐฐ์ด์์ todoItem ์ซ์ ๋งํผ ๋๊ฒ ๋ค.
v-model
React๋ก ๋ฐ์ง์๋ฉด onChange
ํ๋ฉด์์์ DOM์กฐ์(๋ฐ์ดํฐ ๋ณ๊ฒฝ)๊ณผ Vue ์์์ ์ธ์คํด์ค์ ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ด ๋์ผํ๊ฒ ๋ณ๊ฒฝ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
v-on
React๋ก ๋ฐ์ง์๋ฉด onClick
<span @click="showModal=false">X</span>
<span v-on:click="showModal = false" >X</span>
๊ฐ๋ค.
ํ๊ฐ์ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ์ปดํฌ๋ํธ์ด๋ค.
UI์ ์ผ๋ก ํํ๋ง ํ๋ค.
created
life cycle hooks์ด๋ค.
x-template์ด๋
.vueํ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์์ผ๋๊น ๋ชจ๋ํ๋ฅผ ํ๊ณ ์๋ค.
ํ
ํ๋ฆฟ์ ๋ชจ๋ํ ํ๋ ค๋ฉด x-template์ ์ธ ์ ์๋ค.
์ฌ๋กฏ์ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ด๋ค. ํน์ ์ปดํฌ๋ํธ์ ๋ฑ๋กํ ํ์ ์ปดํฌ๋ํธ์ ๋งํฌ์ ์ ํ์ฅํ๊ฑฐ๋ ์ฌ์ ์ํ ์ ์๋ค.
์ฌ์ฉ๋ฐฉ๋ฒ
์์
<template v-slot:header>๊ฒฝ๊ณ !</template>
ํ์
<div class="modal-header">
<slot name="header">default header</slot>
</div>
๋ฌด์ํ ๋ง์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ํ ๊ด๋ฆฌ ํจํด์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ Flux๊ฐ ๋ฑ์ฅํ๋๊ฐ?
MVC ํจํด์ ๋ณต์กํ ๋ฐ์ดํฐ ํ๋ฆ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์
์น ์ฑ์์์ MVC๋ Controller๊ฐ ํ๋ ์ญํ ์ด ๊ทธ๋ณด๋ค๋ ์กฐ๊ธ ํฌ๋ค. SPA์ ๊ฒฝ์ฐ์๋ ํ๋ฉด ํ๋๋ฅผ ๊ณ์ ๋๊ณ ๊ฐ๋ ์์ด๋ค ๋ณด๋