Vue Template

 

- 템플릿 문법

• 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용
• 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일(DOM 조작 최소화)
  
  

- 보간법(Interpolation)

• 문자열
  • 데이터 바인딩의 가장 기본 형태는 'Mustache'(이중 중괄호 구문) 기법을 사용한 문자열 보간법
  • v-once 디렉티브는 사용하는 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행

  <span>메시지: {{ msg }}</span>
  <span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>

 

• 원시 HTML
  • 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석
  • 실제 HTML을 출력하려면 v-html 디렉티브 사용
  • 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점이 발생
    • HTML 보간법은 반드시 신뢰할 수 있는 컨텐츠에서만 사용
    • 사용자가 제공한 컨텐츠에서는 절대 사용하면 안됨

  <p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

 

• 속성
  • Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없다.
  • 대신 v-bind 디렉티브를 사용(약어 v-bind:id => :id)

  <div v-bind:id="dynamicId"></div>
  <button v-bind:disabled="isButtonDisabled">Button</button>

  • 동적 전달인자와 사용(대괄호)

  <template>
    <h1 :[attr]="'active'" @[event]="add"></h1>
  </template>
  
  <script>
  export default {
    name: 'App',
    data() {
      return {
        attr: 'class',
        event: 'click',
      };
    }
  };
  </script>
  
  <style>
  .active {
      color: red;
      font-size: 20px;
  }
  </style>