-
[Vue.js] 기본 문법 (v-once, v-html)Front-End/Vue.js 2022. 11. 13. 11:30
앞서 vue.js의 기본 문법과 v-bind에 대해 정리해 보았다. 이번 포스팅에선 디렉티브의 다른 문법들을 정리해보자.
https://wonisdaily.tistory.com/140
[Vue.js] 개념과 기본문법 살펴보기 (data, method)
📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page
wonisdaily.tistory.com
📑 v-once
설명에 앞서 바로 코드를 살펴보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{text}}</h1> <p>{{sayHello()}}</p> </div> <script> new Vue({ el : '#app', data : { text : "vue.js 배워보기", }, methods : { sayHello: function(){ this.text ="안녕하세요!!!" return this.text } } }) </script> </body> </html>
위의 코드를 살펴보면 sayHello 함수는 data에 선언된 text 값을 "vue.js 배워보기에서" "안녕하세요!!"로 변경 후 text를 출력하는 걸 확인할 수 있다. 이는 Vue instance 내의 데이터와 DOM이 연결되어 모든 것이 반응형으로 작동하게 해주는 특성 때문이다. 따라서 처음 title 값은 "vue.js 배워보기에서"로 출력되지만, sayHello 함수가 호출 되는 순간, data에 선언되어 있는 text값이 "안녕하세요!!"로 변경된다.
그렇다면 위의 {{text}}는 그대로 출력되게 할 수 없을까?? 변경되지 않고?? 이럴때 사용하는 것이 v-once 디렉티브이다.
📌 h1 태그에 v-once 넣기
<h1 v-once>{{text}}</h1>
위와 같이 h1 태그에 v-once를 넣어주면 아래와 같이 원했던 동작대로 출력된다.
v-once는 HTML 코드로 출력된 이후에 어떤 후처리, 어떤 동작에 의한 값 변경이 들어와도 처음에 출력한 값을 유지시킬때 사용한다.
📑 v-html
data의 값을 출력하는 데 관련 있는 디렉티브의 마지막은 바로 v-html이다. v-html은 이름을 통해 예상하듯이 HTML 코드를 직접적으로 입력해줄 때 사용되는 디렉티브이다.
만약 HTML 코드 자체를 data내 선언해주고 해당 값을 HTML 코드 형태로 출력해줘야 한다면 어떻게 할까? v-html을 모르는 상태라면 아래와 같이 작성할 것이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{link}}</p> </div> <script> new Vue({ el : '#app', data : { link : 'https://www.naver.com/' } }) </script> </body> </html>
결과를 보면 링크가 연결되는 것이 아닌 그냥 String 형태의 문자열로 출력되어 버린다. Vue에 입장에서는 이게 html인지, 그냥 문자열인지 구분할 수 없으니 당연하다. 이럴 때 사용하는 것이 바로 v-html 디렉티브이다.
📌 p 태그에 v-html 디렉티브 삽입
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-html="link"></p> </div> <script> new Vue({ el : '#app', data : { link : "<a href='http://medium.com'>링크</a>" } }) </script> </body> </html>
v-html을 사용하지 않은 코드와 비교해보면 {{ link }}를 p태그 안에 직접 넣어주지 않고, v-html 디렉티브를 사용해 p태그의 속성값으로 넣어주었다.
개발자 도구를 통해 확인해 보면, p태그 안에 아예 a 링크가 삽입된 걸 확인할 수 있다.
📑 v-bind vs v-html
둘다 값을 삽입하는 것처럼 보이는 v-bind와 v-html의 차이는 무엇일까?
한마디로 말하면 v-html은 vue의 data에서 정의한 값 그 자체를 v-html 디렉티브를 넣은 태그 안에 그대로 삽입한다. 그러나 v-bind는 data에 정의한 값을 v-bind 태그가 붙어있는 속성값으로 대체해준다. 코드를 비교해보면 아래와 같은데 더 자세히 설명해볼까 한다.
<v-html, v-bind 비교 코드>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-html="vHtmlLink">링크1</p> <a v-bind:href="vBindLink">링크2</a> </div> <script> new Vue({ el : '#app', data : { vHtmlLink : "<a href='http://medium.com'>링크11</a>", vBindLink : "http://medium.com" } }) </script> </body> </html>v-html은 문자열 태그 div, p와 같은 태그에서 text 값을 대체해줄때 vue에서 직접 html 태그 문법을 사용해 그 문법을 그대~로 v-html이 있는 태그에 적용시켜주는 것이다.
v-bind는 속성 값을 가지는 특정 태그들의 속성값에 vue에서 정의한 값을 적용해주는 것이다.
반응형'Front-End > Vue.js' 카테고리의 다른 글
[Vue.js] 양방향 데이터 바인딩 v-model (0) 2022.11.13 [Vue.js] 계산된 속성 computed vs methods (0) 2022.11.13 [Vue.js] 기본 문법 (v-on 이벤트리스너) (0) 2022.11.13 [Vue.js] 기본 문법, 디렉티브 사용 v-bind (0) 2022.11.13 [Vue.js] 개념과 기본문법 살펴보기 (data, method) (0) 2022.11.13