[vue]템플릿 문법 (mustache, v-text, v-model, v-html)

mustache

<template>
  <h1>{{animal}}</h1>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey"
    };
  }
}
</script>

data속성에서 animal을 리턴 시켜준후

중괄호 두개로 감싸서 노출시킨다.

v-text

 <template>
  <h2 v-text="animal"></h2>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey"
    };
  }
}
</script>

태그안에 v-text라는 속성에 대입하여도 결과는 같다.

하지만 태그사이에 또다른 문자를 입력한다면 에러가 발생하여 mustache문법을 더 많이 사용한다.

<template>
  <h2 v-text="animal">dfdfdf</h2><!--에러-->
</template>

v-model

<template>
  <h1>{{animal}}</h1>
  <h2 v-text="animal"></h2>
  <input type="text" v-model="animal"/>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey"
    };
  }
}
</script>

input 태그에 값을 넘겨줄때 사용한다.

만약 사용자가 input태그의 값을 변경하면 animal의 값도 변경된다.

v-html

<template>
  <h1>{{animal}}</h1>
  <h2 v-text="animal"></h2>
  <input type="text" v-model="animal"/>
  <div v-html="alertMessage"></div>
</template>

<script>

export default {
  name: 'App',
  data: ()=>{
    return {
      animal:"Monkey",
      alertMessage:"<button>경고</button>"
    };
  }
}
</script>

v-html속성으로 html을 작성할 수 있다.