Vue js html데이터 바인딩(3)
Vue js html데이터 바인딩(3) — #html데이터 바인딩 #Vuejs 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다...
#html데이터 바인딩 #Vuejs
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
html 데이터 바인딩
| <template> <div> <h1> Hello</h1> </div></template><script>export default { }</script><style></style> |
|---|
html, javascript, css 관리
vue 파일을 살펴보자. vue js는 html js css를 한페이지에 편하게 관리 할 수 있다.
- template태그는 html코드를 작성하는 곳
- script태그는 js코드를 작성하는 곳
- style태그는 css코드를 작성하는 곳
html과 매우 비슷한 형태로 관리가 가능하여 개발할때 친숙함을 제공한다.
Vue js 데이터 바인딩
.innerHtml 역할을 수행하는 v-html
기존 js에서 div 태그의 html내용을 수정하기 위해서는 div 태그의 id값을 찾아서 .innerHtml로 변경시킬 수 있었다.
Vue js는 v-html을 사용하여 한번에 변경이 가능하다.
<template> <div> <h1>{{ htmlString }}</h1> </div> <div v-html="htmlString">안녕</div></template><script>export default { component: {}, data() { return { htmlString: '<p style="color:blue;">파란색 문자</p>', }; },};</script> |
|---|
return안에 데이터를 넣어놓고 String형태와 v-html형태로 넣어보았다. {{ }} (중가로 두개)는 sting으로만 변환되기 때문에 htmlString에 담긴 문자열이 모두 담긴다.
반면 v-html은 div태그안의 .innerHtml로 들어가 html요소 자체를 변경시킨다.
문자열 데이터바인딩으로 넣은 변수는 문자그대로 찍히는 것을 볼 수 있고, v-html로 넣은 데이터는 "안녕"이라는 글자와 스타일 컬러가 모두 변경 되는 것을 볼 수 있다.