Vue.JS Delimiters 표기 바꾸기

Vue.JS Delimiters 를 기본적으로 {{ }} 이걸 많이 쓴다고 하는데, 이건 다른 곳에서도 쓰이는 표기라, 중복으로 사용되면 무엇인 적용될 지 잘 모르겠죠 그래서 일단 편한것으로 바꿔서 사용해 보자.

현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 )

 

아래 코드는 delimiters 를 [[ ]] 형태로 변경해서 사용하는 예제이다.

<script>
let vm = new Vue({
    delimiters: ['[[', ']]'],
    el: '#vue_div',
    data: {
      newUrlName: null,
      newUrlTarget: null,
      urlLists: []
    },
    ...
    
 </script>

 

코드상에서 id="vue_div" 로 선언된 부분에서는 jinja2 같은 어떤 템플릿 베이스 엔진이 동작하더라도 여기에 정의한 대로 [[ ]] 로 쓰이는 변수, 문장들은 vue.js 껏으로 이해해서 동작이 된다.

 

간단하지만, 일단 나 같은 초보자들은 일단 알고 넘어가야지 :)

안헷갈리게 주소를 잘 붙여놨네 모양이 다 비슷해 :)

Maria Orlova 님의 사진, 출처: Pexels