Vue 앱에서 원시 HTML 렌더링

그렇게 자주는 아니지만 문자열로 저장된 원시 HTML을 DOM에 삽입해야 하는 경우가 있습니다. 물론 아주 드물게. 대부분의 경우 이렇게 하면 다양한 XSS 공격에 노출될 수 있으므로 절대 이렇게 해서는 안 됩니다. 다소 유효한 사용 사례는 오랫동안 잊혀진 서버의 오래된 데이터베이스에 데이터와 혼합된 HTML을 저장하는(떨림) 고대 레거시 시스템을 위한 새로운 프런트 엔드 구성 요소를 작성하는 경우일 수 있습니다. 업스테이트 일부 임대 시설의 방. 이 경우 앱에서 원시 HTML 렌더링에 의존해야 할 수 있습니다.

시작하겠습니다. 먼저 RegEx 기술을 활용하십시오.

농담이야. 레거시 시스템을 수용하기 위해 알려진 우주의 운명을 위험에 빠뜨리고 싶지 않습니다.

어쨌든 Vue는 우리를 위해 이 모든 것을 처리할 수 있는 멋지고 작은 지시어를 제공합니다. 예상대로 v-html이라고 합니다.

이를 사용하려면 다음과 같이 데이터 모델의 HTML 문자열에 대한 참조를 구성 요소 템플릿의 v-html에 전달합니다.

<template>
  <div v-html="legacySystemHTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Just like JSX! Oh wait...
      legacySystemHTML: `
        <FONT color="#faddad" size="-2">
          <MARQUEE>Please enter your name to continue.</MARQUEE>
          ...
        </FONT>
      `
    }
  }
}
</script>

마찬가지로 HTML이 구성 요소로 렌더링됩니다. legacySystemHTML 속성을 업데이트하면 그에 따라 HTML이 업데이트됩니다.

나쁘지 않다!

또한 여기에 다소 관련된 비밀이 있습니다. v-text 속성은 요소의 텍스트 콘텐츠만 설정한다는 점을 제외하면 같은 방식으로 사용할 수 있습니다.

…

Mustache 표현식({{ componentInnerText }})을 대신 사용할 수 있는데 왜 이것을 사용하는지 모르겠지만 거기에 있습니다!