학습목표
Vue.js의 기본 디렉티브
v-for,v-bind를 이용해 menu를 구현하고 Vue.js의 기본구조와 기본 디렉티브를 학습한다.
디렉티브(directive)란?
디렉티브를 직역하면 명령,지시이다. 디텍티브는 말 그대로 무엇을 하는 것을 지시하는 것이며 Vue.js의 View영역에서 요소의 기능을 명령하는 역할을 한다.
기본디렉티브 / 사용자지정디렉티브(custom directive)
Vue.js에서 기본으로 제공하고 있는 디렉티브를 기본 디렉티브라고 하며 사용자가 스스로 만들어서 사용하는 것을 사용자지정 디렉티브(custom directive)라고 한다.
기본 디렉티브
| 디렉티브 | 설명 |
|---|---|
| v-text | innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자그대로 보여준다. |
| v-html | v-html innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현한다. |
| v-bind | .attr()과 비슷한 기능을 수행하며 태그의 속성을 동적으로 변경할 때 사용한다. |
| v-model | 양방향 데이터를 공유할 때 사용한다. |
| v-show | css의 display 와 동일한 기능을 수행한다. |
| v-if | if 조건문 구현 |
| v-else | else 조건문 구현 |
| v-else-if | else if 조건문 구현 |
| v-for | for 반복문 구현 |
| v-pre | vue.js가 컴파일되지 않게하며 {{머쉬태시}}도 그대로 보여진다 |
| v-once | vue.js가 처음 한번만 렌더링을 수행하며 데이터가 변경되어도 처음값만 보여준다. |
| v-clock | 컴파일 되지않는 값이 순간 나오는 것을 막고 결과값만 보여준다. |
기본적으로 제공되는 디렉티브는 위 와 같은데 본 포스팅에서는 v-for을 이용해 data에 정의된 객체값을 모두 가져와 v-bind를 이용해 항목의 속성값을 바꿔줄 것이다.
HTML
<div id="app">
<header id="header">
<ul id="menu">
<li v-for="list in menuList">
<a v-bind:href="list.ahref">{{list.menu}}</a>
</li>
</ul>
</header>
</div>JavaScript
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1. 인스턴스 선언
let app = new Vue({
//2. Vue가 적용될 요소 지정
el: '#app',
//3. 오브젝트 형태로 data 저장
data: {
menuList: [
{menu: 'company',ahref:'http://naver.com'},
{menu:'product',ahref:'http://daum.net'},
{menu:'gallery',ahref:'http://facebook.com'},
{menu:'location',ahref:'http://instagram.com'}
]
}
});
</script>Vue 시작하기
1. 인스턴스 선언
let app = new Vue({})
Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것이다. 쉽게 이야기하면 화면에 렌더링 되는 HTML 코드들을 제어하는 것인데. new Vue({})는 이러한 역할을 할 Vue를 선언하고 정의해주는 역할을 한다.
이렇게 생성된 오브젝트를 Vue 인스턴스라고 한다.
Vue 인스턴스
- Vue 인스턴스란 생성된 Vue 오브젝트 하나이다.
- Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 된다.
- 간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행한다.
2. Vue가 적용될 요소 지정
el: '#app'
el은 Vue가 새롭게 정의될 때, 해당 Vue가 적용될 요소를 지정해주는 역할을 한다.
즉,
1.인스턴스를 생성하여 Vue를 사용할 것을 선언하고
2.Vue를 어느 요소에 적용할 것인지 말해주는 역할을 한다.
3. 오브젝트 형태로 data 저장
data: {
menuList: [
{menu: 'company',ahref:'http://naver.com'},
{menu:'product',ahref:'http://daum.net'},
{menu:'gallery',ahref:'http://facebook.com'},
{menu:'location',ahref:'http://instagram.com'}
]
}data는 vue의 정보저장소이다. Vue는 여러 속성(property)들을 가지는데 그 중 data는 Vue에서 사용할 정보들을 저장하는 곳으로 오브젝트 형태로 정보들을 저장한다.
여기서는 menuList라는 변수를 만들고, 그 안에 menu의 키 값과, ahref 키 값을 가진 객체를 4개 넣어주었다.
이렇게 코드를 작성하고나면 Vue.js를 사용할 준비가 끝났다.
HTML
<div id="app">
<header id="header">
<ul id="menu">
<li v-for="list in menuList">
<a v-bind:href="list.ahref">{{list.menu}}</a>
</li>
</ul>
</header>
</div>-
먼저 Vue로 제어할 app을 만들고 그 안에 gnb를 만들 때 일반적으로 많이쓰이는 ( header > ul > li > a )구조로 마크업하였다.
-
li가 여러개 오는 구조이기 때문에
v-for반복문을 이용해 data에 넣어둔menuList값을 모두 가져왔다.
v-for
v-for은 반복문을 이용해 리스트를 렌더링할 때 사용된다.
syntax
v-for="item in array"
item은 array가 반복되면서 불러올 요소 하나하나를 의미하며, 새롭게 선언해주는 변수이므로 자체적으로 만든 이름을 사용한다.
여기서는 list라는 변수를 만들어 이미 data에 넣어준 menuList 데이터 묶음을 가져와서 요소 하나하나를 불러왔다.
v-bind를 이용해list각각의ahref값을 가져와href속성에 넣고 텍스트 노드 역시list각각의menu값을 가져와 넣었다.
v-bind
v-bind는 태그의 속성을 동적으로 변경할 때 사용한다.
syntax
v-bind:속성
v-bind를 사용하면 간편하게 데이터와 연결할 수 있다. 여기서 '간편함'이란, 서버를 거치지않고 view영역에서 처리함을 의미한다. html태그에 있는 속성에 클론과 v-bind를 입력하는 것으로써 간단하게 데이터를 연결할 수 있다.
v-bind를 사용할 수 있는 대표적인 속성
- 이미지 데이터 연결 :
v-bind:src - 링크를 통한 연결 :
v-bind:href - 스타일시트 연결 :
v-bind:class, v-bind:style - 키를 통한 연결 :
v-bind:key
머스태쉬(Mustache) 👨🏾🦳
<a>{{list.menu}}</a>
머스태쉬는 데이터 바인딩의 가장 기본 형태로서 이중 중괄호을 사용한 텍스트 보간이다. 예를 들어 위의 코드에서 {{list.menu}}는 해당 데이터 객체의 값으로 대체된다. 또한 데이터 객체의 속성값이 변경될 때 마다 갱신된다.
완성
이렇게 v-for, v-bind를 이용하여 데이터를 동적으로 받아와 menu를 구성할 수 있다!
