템플릿 문법

공식 사이트

https://v3.vuejs.org/guide/template-syntax.html#interpolations

Template Syntax | Vue.js

 

클릭 이벤트를 보간법을 이용하여 클릭할 때마다 !표가 늘어나도록 하는 예제

<template>
  클릭할 때마다 !표가 늘어나도록 클릭 이벤트에 함수를 적용시킨다.
  보간법을 이용하여 반응형으로 바로 변화가 적용되도록 설정하였다.
  <h1 @click="add">{{msg}}</h1>
</template>

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

브라우저에서 확인

 

v-once 디렉티브를 이용하여 데이터가 변경되어도 갱신되지 않도록 설정할 수 있다.

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

클릭을 하여도 변하지 않는것을 확인 할 수 있다.

data에 html 형식을 입력하였을 때 브라우저에 띄워주는 방법

 

메세지 부분을 아래와 같이 변경

  data(){
    return {
      // msg: 'Hello World!'
      msg: '<div style="color: red;">Hello!!</div>'
    }
  },

확인(Html 형식으로 표현되지 않는 것을 확인 할 수 있다.)

Html 형식으로 출력하는 방법

template 부분에 코드 추가

<!-- HTML 형식으로 브라우저에 보여주기 -->
  <h1 v-html="msg"></h1>

브라우저 확인

 

Html 속성에 data 값을 넣어주는 방법

 v-bind를 사용한다.

 

예제 코드 ( v-bind:class="msg2"을 이용하여 data값을 class에 적용시킨다.)

<template>
  <!-- 클릭할 때마다 !표가 늘어나도록 클릭 이벤트에 함수를 적용시킨다.
  보간법을 이용하여 반응형으로 바로 변화가 적용되도록 설정하였다. -->
  <h1 @click="add" v-once>{{msg}}</h1>
  <!-- HTML 형식으로 브라우저에 보여주기 -->
  <h1 v-html="msg"></h1>

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

<script>
export default {
  data(){
    return {
      // msg: 'Hello World!'
      msg: '<div style="color: red;">Hello!!</div>',
      msg2: 'active'
    }
  },
  // 메소드 생성
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

<style>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>

 

마지막 예제 (클래스 속성, 이벤트 속성을 data에서 전달받아서 적용)

<template>
  <!-- 클릭할 때마다 !표가 늘어나도록 클릭 이벤트에 함수를 적용시킨다.
  보간법을 이용하여 반응형으로 바로 변화가 적용되도록 설정하였다. -->
  <h1 @click="add" v-once>{{msg}}</h1>
  <!-- HTML 형식으로 브라우저에 보여주기 -->
  <h1 v-html="msg"></h1>

  <h1  v-bind:class="msg2">{{msg2}}</h1>
  <!-- 속성 값을 data에서 전달받아서 적용 -->
  <h1  v-bind:[attr]="'active'" @[event] = 'add'>{{msg2}}</h1>
</template>

<script>
export default {
  data(){
    return {
      // msg: 'Hello World!'
      msg: '<div style="color: red;">Hello!!</div>',
      msg2: 'active',
      attr: 'class',
      event: 'click'
    }
  },
  // 메소드 생성
  methods: {
    add() {
      this.msg2 += '!'
    }
  }
}
</script>

<style>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>