Django와 Vue 구문 간의 충돌을 해결하는 방법

이 글에서는 주로 Django와 Vue 사이의 구문 충돌에 대한 완벽한 솔루션을 소개합니다. 이 글에서는 두 가지 해결 방법을 공유합니다. 도움이 필요한 친구가 참고할 수 있습니다.

django 웹 프레임워크에서 vue를 사용할 때 구문 충돌이 발생합니다.

vue는 {{}}를 사용하고 django도 {{}}를 사용하므로 충돌이 발생합니다.

해결책 1:

django1.5 이후에 태그가 추가되었습니다.

{% verbatim myblock %} {% endverbatim myblock %}

코드가 래핑되었습니다. 이 태그는 Django의 템플릿 엔진에 의해 렌더링되지 않습니다.

따라서 {% verbatim myblock %} 태그 중간에 {{ }}가 포함된 Vue 코드를 넣을 수 있습니다. 예:

<p id="app1">
  {% verbatim myblock %}
    {{ message1 }}
  {% endverbatim myblock %}
</p>

해결책 2:

Vue의 {{ }}를 다음으로 수정하세요. {[ ]}

<script>Vue.config.delimiters = ["{[", "]}"]</script>

사용 시:

<p id="app1">
  {[ message1 ]}
</p>

ps: Vue의 django 및 vue 구문 충돌 처리

vue.js의 기본 바인딩 기호 수정

vue2.0에서 이 쓰기 방법을 포기했습니다.

Vue.config.delimiter=['[[',']]'];

올바른 자세:

var vm = new Vue({
  delimiters:['[[', ']]'],
  el:'#box',
  data:{
    arr:['apple','pear','grape']
  },
  methods:{
    add:function () {
      this.arr.push('tomato')
    }
  }
})

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue에서 cdn 최적화를 사용하는 방법

js에서 파일 형식 크기를 결정하는 방법

js에서 슬라이딩 확인이 필요한 로그인을 구현하는 방법

에서 구현하는 방법 드롭다운 상자의 Angular 퍼지 쿼리 기능

Nodejs의 암호화 모듈 보안 지식 정보(자세한 튜토리얼)

Angularjs에서 페이징 및 검색 기능을 구현하는 방법

위 내용은 Django와 Vue 구문 간의 충돌을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!