템플릿 문법

보간법

문자열

• 중괄호 두번으로 데이터를 보간한다

• v-once : 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행

<span v-once>{{msg}}</span>

원시 HTML

• v-html : html 텍스트를 실제 html 요소로로 변환해서 디렉티브를 선언한 태그의 자식으로 들어감
• 이중 중괄호로 html텍스트를 사용하면 일반 텍스트로 해석함에 주의
• vanilla JS에 innerHTML과 동일하게 XSS에 취약할 수 있다

<div id="app">
    <div v-html="rawHtml"></div>
</div>
  
<script>
    const app = {
        data() {
            return {
              rawHtml: "<h3>안뇽</h3>"
            }
        }
    }
  
    const vm = Vue.createApp(app).mount('#app')
</script>

속성

• 이중 중괄호 보간법은 HTML 속성에는 쓸 수 없다.
• v-bind 디렉티브를 이용한 값에서는 별다른 표기 없이 이름만 작성해서 보간을 수행할 수 있다
• 단일 표현식만 사용 가능, (ex. if문은 x, 삼항 연산자로 대체)
• 문자열은 ‘’ 안에서 표현

..
<style>
  .orange {
      color: orange
  }
</style>

<div id="app">
    <h1 class="name"></h1> //속성 보간 처리
</div>

<script>
    const app = {
        data() {
            return {
                name: "orange"
..
</script>

• boolean을 값으로 하는 속성은 v-bind가 붙어지면서 null, undefined, false일 때는 false, 그 외에는 모두 true로 치환됨에 주의

..
<div id="app">
    <input placeholder="입력해주세여" v-bind:disabled="disabled"></div>
</div>

<script>
    const app = {
        data() {
            return {
                disabled: "" //빈문자열은 true이다
..
</script>

 
 
 

디렉티브

• 전달인자 ⇒ 일부 디렉티브는 뒤에 콜론을 붙여서 전달인자를 받는다
• ex) v-bind:속성, v-on:이벤트이름
• 동적 전달인자 ⇒ 표현식을 대괄호로 묶어서 전달인자로 받음

<a v-bind:[attributeName]="값" />
...
data() {
	return {
		attributeName: 'class'
	}
}

• 약어
• v-bind를 생략 ⇒ 속성 앞에 콜론을 붙임 (ex. :class)
• v-on을 생략 ⇒ 이벤트 이름 앞에 @를 붙임(ex. @click)