Vue.js 와 DOM의 상호작용 방법

 Vue.js 는 아래와 같은 html 코드를 기반으로 템플릿을 만들어냅니다. 그리고 내부적으로 이 템플릿을 이용하여 사용자에게 실제로 보여지게될, 렌더링된 DOM을 생성합니다.

 Vue 인스턴스는 new 키워드를 통해 아래와 같이 생성할 수 있습니다. 인스턴스 내의 데이터를 html 코드에 바인딩하기 위해서 이중 중괄호 {{ }} 를 이용할 수 있습니다. {{ }} 를 Interpolation(보간법) 이라고 합니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ title }}</p>
</div>

new Vue({
  el: '#app',
  data: {
  	title: 'Hello world!'
  }
});

---

  

 Interpolation 안에는 data 오브젝트 뿐만 아니라 methods 내의 함수들을 호출하여 렌더링할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHello() }}</p>
</div>

new Vue({
  el: '#app',
  data: {
  	title: 'Hello world!'
  },
  methods: {
  	sayHello: function() {
    	return 'Hello';
    }
  }
});

 

 만약 메서드 내에서 data 프로퍼티에 접근하고 싶다면 this 키워드를 이용하여 인스턴스의 프로퍼티에 접근할 수 있습니다. this 키워드는 data 오브젝트를 참조하고 있지는 않습니다. 대신 vuejs 는 프록시를 이용하여, 인스턴스 내에 존재하는 오브젝트를 간단하게 접근할 수 있도록 도와줍니다.

new Vue({
  el: '#app',
  data: {
  	title: 'Hello world!'
  },
  methods: {
  	sayHello: function() {
    	return this.title;
    }
  }
});

---

 

 Directive

Vue.js 에서 Interpolation은 html 요소의 attribute 안에 사용될 수 없습니다. 예를 들면 아래와 같은 a 태그는 사용될 수 없습니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHello() }} - <a href="{{ link }}">Google</a></p>
</div>

 만약 위와 같이 사용한다면 "{{ link }}" 자체가 인코딩되어 링크로 이동됩니다.

 

Vue.js 에서는 v-bind 라는 디렉티브를 사용하여 우리가 원하는 기능을 만들 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>
</div>

new Vue({
  el: '#app',
  data: {
    title: 'Hello world!',
    link: 'http://google.com'
  },
  methods: {
  	sayHello: function() {
    	return this.title;
    }
  }
});

 

Vue.js 에서는 이러한 html 애트리뷰트를 직접 사용하는 대신에 방금 본 예제와 같이 디렉티브를 활용하여 바인딩하여 사용합니다. 그리고 또 다른 점이 아까 보았던 data 프로퍼티를 바인딩하는 방법과 다르게 디렉티브에서는 Interpolataion을 사용하지 않았습니다. 그 이유는 디렉티브로 바인딩을 하면서 이미 Vue.js 템플릿 언어 범위에 있기 때문입니다.

 마찬가지로 "link" 대신에 "sayHello()" 를 넣는다면 title 프로퍼티 값이 링크 값으로 들어가게 됩니다.

 

---

 

 

Raw HTML 코드를 바인딩하는 방법

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>
  <hr>
  <p>{{ finishedLink }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    title: 'Hello world!',
    link: 'http://google.com',
    finishedLink: '<a href="http://google.com">Google</a>'
  },
  methods: {
  	sayHello: function() {
    	return this.title;
    }
  }
});

 위와 같이 finishedLink 프로퍼티에는 문자열로 이루어진 HTML 코드가 선언되어 있고, Interpolation 에 finishedLink 프로퍼티를 바인딩하면 아래와 같이 <a> 태그가 나타는 것이 아니라 문자열 그 자체가 출력됩니다.

 

 이는 cross-site scripting attack 을 방지하기 위해서 vue 에서 문자열이 나타나도록 렌더링하는 것입니다. 만약 HTML 코드를 바인딩하고 싶다면 아래와 같이 바인딩을 하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>
  <hr>
  <p v-html="finishedLink"></p>
</div>

 

---

참고 자료

https://www.udemy.com/vuejs-2-the-complete-guide/

(Udemy 에서 구매하여 강의를 들으며 정리한 내용입니다.)