[Vue.js] 구분 문자 변경하기

Vue.js 를 사용할 때 기본설정으로 하면 {{ test }} 이런식으로 사용해야 한다.

하지만 이런 사용은 파이썬 플라스크를 만나면 충돌을 일으킬 수 있다.

이럴 때는 Vue를 선언할 때 delimiters 옵션을 주어 적절한 다른 문자로 대체하면 된다.

참고로 Python Flask 콘솔창에서 jinja2.exceptions.UndefinedError 이런 에러메세지를 볼 수 있다.

다음의 매우 간단한 예제를 통해 사용법을 알아볼 수 있다.

참고로 {{ }} 를 ${ } 로 대체하는 예제이다.

<script src="https://unpkg.com/vue@2.6.6/dist/vue.js"></script>

<div id='test'>
  name: ${name}<br/>
  age: ${age}
</div>

<script>
  var testApp = new Vue({
    el: '#test',
    delimiters: ['${', '}'],
    data: {
      name: 'juragi',
      age: 27
    }
  })
</script>

name: ${name}
age: ${age}