[Vue.js] 템플릿 문법

Vue.js의 공식 문서를 참고하여 정리합니다.

https://v3.vuejs-korea.org/guide/template-syntax.html#%E1%84%87%E1%85%A9%E1%84%80%E1%85%A1%E1%86%AB%E1%84%87%E1%85%A5%E1%86%B8-interpolation

템플릿 문법 | Vue.js

데이터 바인딩의 기본적인 형태

보간법(데이터를 보간하는 방법) = Mustache(이중 중괄호)를 사용한 텍스트 보간법입니다.

<template>
    <p>{{ msg }}</p>
</template>

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

 

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

데이터를 단 한번만 화면에 렌더링 후 데이터가 변경하더라고 화면에 갱신하지 않습니다.

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

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

 

원시 HTML

일반 텍스트가 아닌, 실제 html 형식으로 출력하고 싶을 때 사용합니다.

이중 중괄호는 일반 텍스트로 밖에 해석할 수 밖에 없기 때문에, v-html 을 사용합니다.

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

<script>
export default {
    data() {
        return {
            msg: '<div style="color:red">Hello!</div>'
        }
    }
}
</script>

 

속성

Mustache(이중 중괄호)는 html 속성을 사용할 수 없으므로 v-bine를 사용합니다.

<template>
    <p 
        v-bind:class="'active'"
        @[event]="add"> 
        {{ msg }}
    </p>
</template>

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

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