Django 및 Vue.js를 {% verbatim %}과(와) 연동시키다

Django 및 Vue.js를 {% verbatim %}과(와) 연동시키다

django와 Vue는 같은 {{ X }}템플릿 구문을 사용해도 연동되도록 노력하고 있습니다.

django 1.5부터 이 기능을 사용할 수 있습니다.{% verbatim %}tag. 그래서 평소대로 django 템플릿을 사용할 수 있을 것 같아서 VUE에서 넘겨받아야 하는 부분에서는 {% verbatim %} 태그를 사용합니다.그러나 내 vue 데이터를 로드하는 대신 django는{{ variable }}.

예를 들어 django 코드는 다음과 같습니다.

{% verbatim %}

<div id='sessions'>
  <h2>{{message}}</h2>
</div>

{% endverbatim %} 

그리고 내 app.js 파일에는 다음이 있습니다.

var sessions = new Vue({
  el: '#sessions',
  data: {
    message: 'Hello Vue!'
  }
})

하지만 렌더링 대신Hello Vue!렌더링하다{{message}}

콘솔에 오류가 표시되지 않고 그렇지 않으면 vue가 올바르게 로드됩니다.

어떻게 하면 두 가지를 함께 작동시킬 수 있을까요?vue.js {{}} 구문을 변경할 필요가 없습니다.

Vue의 보간 구분 기호를 원하는 대로 변경할 수 있습니다.

var sessions = new Vue({
  el: '#sessions',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue!'
  }
})

이렇게 하면 프레임워크에 필요한 모든 것을 사용할 수 있습니다.

편집

이 경우 @Costantin 페이지에는 여러 div#sessions가 있었습니다.

언급URL : https://stackoverflow.com/questions/43564875/making-django-vue-js-work-together-with-verbatim