Vue.js 템플릿 기본 문법 - 보간법, 디렉티브(동적 전달인자)

🌲 Interpolations

보간법

---

🌳문자열 

데이터 바인딩의 가장 기본 형태는 {{ Mustache }} - 이중 중괄호 구문 기법을 사용한다.

 

 

 

🌲 Directives

v- 형식을 사용하는 특별한 속성

---

🌳v-on

<template>
  <button 
  	v-on:click="msg"> // @click="msg"
  </button>
</template>

🌳v-once

<template>
  <h1 
    v-once
    @click="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

🌳원시 HTML

<template>
  <h1 v-html="msg"></h1>
</template>

<script>
export default {
  data() {
    return {
      msg: '<div style="color:red;">Hello world!</div>'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

🌳v-bind

<template>
  <h1 v-bind:class="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active'
    }
  }
}
</script>

<style scoped>
  .active {
    color: blue;
  }
</style>

🌳동적전달인자

<template>
  <h1 :[attr]="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class'
    }
  }
}
</script>

🌳보간법 디렉티브

v-once	일회성 보간으로 데이터가 변경되어도 갱신되지 않음
v-html	html이 동작하도록
v-if	불리언을 판단하여 삽입하거나 제거
v-bind	v-bind:id 또는 :id
v-on	v-on:click 또는 @click / DOM이벤트를 수신하는 디렉티브
[이름]	동적 전달 인자, 디렉티브의 인자로 사용할 때 문법

 

 

---

공식문서

템플릿 문법 | Vue.js