Vue - Methods & v-html Directive

Vue의 Methods 이해하기

저번에 배운 v-bind나 보간법을 이용해 {{ }} 사이에 데이터 바인딩을 했었습니다.

이때 {{ }} 사이에 데이터가 어떤 조건에 의해 무작위로 바뀌게 출력하도록 해보겠습니다.

이럴때 사용할 수 있는 Vue의 옵션중 하나가 Methods 입니다.

Methods를 사용하면 사용자 이벤트가 발생하는 등의 일이 생겼을때 실행할 함수를 지정합니다.

methods의 값으로는 Javascript 객체를 전달합니다.

이때, 기존의 data는 그 자체로 함수이자 메서드라면 methods는 메서드 및 함수로 만들어진 객체를 찾습니다.

const app = Vue.createApp({
  data: function() {
    return {
      courseGoal: 'Finish the course and learn Vue!',
      vueLink: 'https://vuejs.org/'
    };
  },

  // 이 Methods의 값인 객체의 프로퍼티는 함수여야 합니다.
  methods: {
    outputGoal() {
      const randomNumber = Math.ramdom();

      if (randomNumber < 0.5) {
        return 'Learn Vue!';
      } else {
        return 'Master Vue!';
      }
    }
  }
});

app.mount('#user-goal');

이렇게 자바스크립트 코드를 짠 후 적용할 HTML 태그에 Interpolation 구문을 사용하여 지정해줍니다.

<p>{{ outputGoal() }}</p>

이제 페이지를 새로고침 할때마다 Learn Vue!, Master Vue! 라는 글자가 무작위로 나올것입니다.

---

v-html을 사용하여 원시 HTML 출력하기

const app = Vue.createApp({
  data: function() {
    return {
      courseGoalA: 'Finish the course and learn Vue!',
      courseGoalB: '<h2>Master Vue and build amazing Apps!</h2>',
      vueLink: 'https://vuejs.org/'
    };
  }
 ...

만약 위 코드의 courseGoalB의 문자열로 HTML의 태그가 들어왔을때 {{}}를 통해 출력을 해보면,

HTML 태그가 그대로 문자열로 출력되는걸 볼 수 있습니다.

이유는 크로스 사이트 스크립팅 공격으로부터 보호해주기 때문입니다.

하지만, HTML을 HTML같은 일반 텍스트가 아니라 실제 HTML을 적용하고 싶을때는 어떻게 할까요?

이 경우 사용할 수 있는 디렉티브가 바로 v-html입니다.

<p v-html="outputGoal()"></p>

위 코드처럼 HTML의 태그 내에 v-html 디렉티브를 사용하면 해당 컨텐츠는 HTML로 인식해야 한다고 지정합니다.

만약 v-html을 Default로 설정하면 {{}}에 내장된 크로스 사이트 스크립팅 공격에 대해 보안 위협이 발생하기 때문에,

진짜 필요할때만 사용하는걸 추천드립니다.

사용할 일이 많지는 않지만 언젠간 쓸일이 있어 학습해보았습니다.