Vue3 - 템플릿 문법

## 텍스트 보간법

 

데이터 바인딩의 가장 기본형태는 {{ data }} (이중 중고라호, 콧수염 괄호)를 사용하는 것 입니다.

• 이중 중괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message 값으로 대체됩니다.
• Message 속성이 변경될 때마다 갱신(반응)됩니다. 

 

<template>

  <div>

    <p>문자열 : {{ message }}</p>

  </div>

</template>

<script>

import { ref } from 'vue';

 

export default {

  setup() {

    const message = ref('안녕하세요');

    return {

      message,

    };

  },

};

</script>

 

 v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신(반응) 되지 않는 일회성 보간을 수행할 수 있습니다.

 

(예)

<p v-once> 문자열 : {{ message }} </p>

 

(예제)

<template>

  <div>

    <h2>보간법</h2>

    <p>{{ message }}</p>

    <p v-once>{{ message }}</p>

    <button v-on:click="message = message + '!'">Click!</button>

  </div>

</template>

<script>

import { ref } from 'vue';

 

export default {

  setup() {

    const message = ref('안녕하세요');

    

    return {

      message,

    };

  },

};

</script>

 

 

V-once는 일회성만 보관하므로 버튼 클릭시 반응성 작용이 일어나지 않는다.

 

## HTML (v-html)

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다.  실제 HTML을 출력하려면 v-html 디렉티브를 사용해야합니다.

 

<h2>텍스트: {{ rawHtml }}</h2>

<h2>v-html: <span v-html="rawHtml"></span></h2>

 

 

Tip !

웹 사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점 (opens new window) 으로 쉽게 이어질 수 있고

이는 매우 위험할 소지가 있습니다. HTML 보간법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고 사용자가 제공한

콘텐츠에서는 절대 사용하면 안됩니다.

 

 

## 속성 바인딩 (v-bind)

 

이중 중괄호는 HTML 속성에 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용하세요.

<div v-bind:title=“dynamicTitle”> 마우스를 올려보세요. </div>

 

‘Boolean 속성’은 속성 존재 자체가 참(true) , 거짓(false)을 의미하는 속성입니다.

<input type=“text” v-bind:disabled=“isInputDisabled” />

 

단축 표현

V-bind는 매우 자주 사용하기 때문에 단축 문법이 있습니다.

<div :title=“dynamicTitle”> 마우스를 올려보세요. </div>

<input type=“text” :disabled=“isInputDisabled” />

 

:을 사용하여 속성을 바인딩할 수 있습니다.

 

다중 속성 바인딩 이란 무엇인가 ??

 

(예제)

<template>
  <div>
    <h2>보간법</h2>
    <p>{{ message }}</p>
    <p v-once>{{ message }}</p>
    <button v-on:click="message = message + '!'">Click!</button>
    <hr />
    <h2>v-html</h2>
    <p>{{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
    <hr />
    <h2>속성 바인딩</h2>
    <div :title="dynamicTitle">마우스를 올려보세요</div>
    <input type="text" value="홍길동" :disabled="isInputDisabled" />
    <input v-bind="attrs" />
    <h2>Javascript</h2>
    {{ message.split('').reverse().join('') }}<br />
    {{ isInputDisabled ? '예' : '아니오' }}
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('안녕하세요');
    const rawHtml = ref('<strong>안녕하세요</strong>');
    const dynamicTitle = ref('안녕하세요 !!!')

    const isInputDisabled = ref(false);
    const attrs = ref({
      type: 'text',
      value: '12345678',
      disabled: false,
    });
    return {
      message,
      rawHtml,
      dynamicTitle,
      isInputDisabled,
      attrs,
    };
  },
};
</script>