-
[Vue.js] 기본 문법, 디렉티브 사용 v-bindFront-End/Vue.js 2022. 11. 13. 10:43
Vue.js의 기본 개념과 data, method는 이전 포스팅에서 알아봤다. 이번엔 vue에 문법에 대해 알아보려고 한다.
https://wonisdaily.tistory.com/140
[Vue.js] 개념과 기본문법 살펴보기 (data, method)
📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page
wonisdaily.tistory.com
📑 v- bind
지금까지 {{mustached}} 기호를 통해 Vue 내의 값 혹은 함수를 불러왔다. 하지만 만약 문자열을 출력해야 하는 간단한 경우가 아니라 HTML 속성 내에 Vue에 선언된 값만 사용하고 싶어진다면 어떻게 해야할까? 예를 들어 링크를 달 수 있는 a태그의 href 속성 값에 Vue내에 선언된 값을 넣고싶을 경우가 있을 수 있다.
<a href="{{ link }}">링크</a> // (x) 이렇게 사용할 수 없음
이럴 때 사용하는 게 바로 v-bind 디렉티브이다.
📌 디렉티브 Directive 란?
: 디렉티브란, HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다. 디렉티브는 여러가지가 있는데, 하나씩 살펴보도록 하자. 우리가 알아볼 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"> <a v-bind:href="link">링크</a> </div> <script> new Vue({ el : '#app', data: { link : "https://www.naver.com/" }, method : { } }) </script> </body> </html>a 태그 내에 href="링크주소" 속성이 있어야 되는데, 그 곳에 v-bind 디렉티브를 넣어서 <a v-bind:href="link">링크</a> 라고 입력했다. js 부분을 살펴보면 data에서 link 변수에 값을 할당해주었기에 아래 결과를 보면 링크를 클릭하면 naver 홈페이지로 이동하는 걸 확인할 수 있다.
이렇게 v-bind 디렉티브를 사용하여 Vue 인스턴스 내에 선언된 값을 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> <br> <div id="vuebind"> <input type="file" id="filesel" name="filesel" @change="selimg" /> <div> <!--<img /> 태그는 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.--> <img v-bind:src="imgpath"> </div> </div> </div> <script> vuebind = new Vue({ el: '#vuebind', data: { imgpath:"" }, methods:{ selimg:function(event){ var image = event.target; if(image.files[0]){ alert(window.URL.createObjectURL(image.files[0])); this.imgpath = window.URL.createObjectURL(image.files[0]); } } } }); </script> </body> </html>위의 코드를 살펴보면, <div> 태그에다 id 값을 vuebind로 줬다. 이는 vue에서 관리하기 위함인데 div 그룹 태그 하위 태그들에는 모두 vue에 정의한 데이터, 메서드들을 사용할 수 있다는 의미이다.
첨부파일을 선택할 수 있는 <input> 태그를 두고 그 아래 v-bind를 이용해서 첨부한 이미지를 출력할 수 있는 <img v-bind:src="imgpath"> 태그를 사용했다. imgpath는 Vue의 data로 관리한다.
파일 선택 버튼을 클릭하고 첨부파일 선택 시 this.imgpath에 window 함수를 통해 생성한 URL 경로가 저장된다. 따라서 실시간으로 선택한 파일을 HTML에 전송하여 사용자에게 뿌려준다.
📑 v- 약어 사용하기
v-bind, v-on과 같은 디렉티브 대신에 우리는 약어를 사용할 수 있다.
v-bind:href="url" 을 줄여서 :href="url" 이라고 사용할 수 있다.
v-on:click="doSomething"을 줄여서 @click="doSomting"이라고 사용할 수 있다.위의 2가지는 첨부파일 예제에서 파일 선택 태그 에서 @click을 사용한 것으로 확인할 수 있다.
반응형'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-once, v-html) (0) 2022.11.13 [Vue.js] 개념과 기본문법 살펴보기 (data, method) (0) 2022.11.13