선언적 렌더링
Vue에서 HTML 요소 내에 문자열과 같은 데이터를 어떻게 렌더링하는지 알아보자.
먼저 바닐라 자바스크립트를 통해 <div>안에 문자열을 삽입하기위해서는 아래와같이 코드를 작성할 수 있다. 먼저 <div> 태그를 불러온 뒤에 안에 문자열을 넣는다.
<body>
<div class="app">
</div>
<script>
const div = document.querySelector('.app');
div.innerText = 'hello Vue.js';
</script>
</body>Vue에서는 위와같이 출력하기위해 다음과 같이 작성할 수 있을 것이다. id가 app인 <div>를 Vue 인스턴스를 생성하여 연결한다. 이후에 data라는 속성 내에 message라는 변수를 생성하고 문자열을 넣어주면 HTML 문서 내에 message가 선언된 부분에 해당 문자열이 출력된다.
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello Vue.js'
}
})
</script>
</body>Vue에서는 DOM 요소와 인스턴스를 연결하여 반응형으로 만든다. 이는 데이터의 변경 사항이 있을 때 업데이트가 된다는 의미이다. message의 문자열을 변경하면 app내의 문자열이 변경될 것이다.
디렉티브
디렉티브는 Vue에서 제공하는 특수 속성이며 "v-"와 같은 접두어가 붙어있다. 디렉티브는 렌더링된 DOM 요소에 어떠한 반응형 동작을하게 된다. 다음 코드는 렌더링된 문자열 위에 마우스를 올렸을 때 message에 선언된 문자열이 출력되도록 하는 코드이다.
<p>내의 문자열에 마우스를 올리면 message에 저장된 문자열이 출력된다. 즉 <p>의 title이 message가 되는 것이며 v-bind를 통해 동적으로 출력된다.
<body>
<div id="app">
<p v-bind:title="message">동적으로 바인딩된 title을 볼 수 있다.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello Vue.js'
}
})
</script>
</body>
조건문
HTML 요소에 조건문을 적용할 수 있다. 이를 통해 요소를 출력하거나 하지 않을 수 있다. 다음 코드는 seen이 true일 때 <p>의 내용이 출력되도록 한 것이다. 이를 통해 DOM 구조에도 데이터를 바인딩할 수 있다는 것을 알 수 있다.
<body>
<div id="app">
<p v-if="seen">TRUE일 때 출력된다.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
seen: true
}
})
</script>
</body>
반복문
HTML 요소에 반복문을 적용할 수 있다. data의 todos라는 배열 내의 문자열을 하나씩 꺼내어 todo에 담고 이를 출력하도록 한다. 여기서 todos 배열에 요소를 추가하기위해서 app.todos.push()를 할 수 있다.
<body>
<div id="app">
<li v-for="todo in todos">
{{todo}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
todos:[
'Javascript', 'Vue.js'
]
}
})
</script>
</body>위에서 Vue로 작성한 것을 바닐라 자바스크립트로 다음과 같이 작성할 수 있다. 먼저 출력할 문자열을 todos라는 배열에 저장하며 배열의 크기만큼 반복문을 한다. 반복문 내에서 <li>를 생성하고 문자열을 삽입하며 ul의 자식요소로 추가한다.
<body>
<div class="app">
<ul>
</ul>
</div>
<script>
const div = document.querySelector('.app');
const ul = div.querySelector("ul");
const todos = ['Javascript', 'DOM', 'Vue.js'];
for(let i=0; i<todos.length; i++){
const li = document.createElement("li")
li.innerText = todos[i]
ul.appendChild(li)
}
</script>
</body>참고 kr.vuejs.org/v2/guide/index.html#%EC%84%A0%EC%96%B8%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [Vue] 싱글 파일 컴포넌트(SFC) (0) | 2021.05.11 |
|---|---|
| [Vue] computed와 watch (0) | 2021.05.10 |
| [Vue] Vue 인스턴스 (0) | 2021.05.09 |
| [Vue] 시작하기 02 (0) | 2021.05.08 |
| 동기와 비동기 (0) | 2021.05.03 |