Vue의 Mustache 문법

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

React나 Vue 처럼 front-end 프레임워크는 필히 js의 변수의 값을 html로 렌더링 하는 경우가 많습니다.

이때, Vue 에서는 `` 와 같은 기호를 씁니다.

이 기호는 사람의 콧수염을 닮았다고 하여 Mustache라고 부릅니다.

Vue의 Mustache는 텍스트를 html로 나타내기 위하여 사용하는 문법입니다.

<script setup>
  import {reactive, ref} from 'vue';
  const counter = reactive({count: 1});
  const message = ref("안녕하세요")
</script>

<template>
  <h1></h1>
  <p>숫자 세기 : </p>
</template>

<style scoped></style>

해당 코드처럼, js로 선언된 counter와 message를 html로 나타내기 위해 사용합니다.