Django 와 Vue 문법 충돌 문제 완벽 한 해결 방법

1501 단어 djangovue문법
django 웹 프레임 워 크 에서 vue 를 사용 할 때 문법 충돌 이 발생 합 니 다.
vue 는{{{}을 사용 하고 django 도{{}을 사용 하기 때문에 충돌 합 니 다.
해결 방법 1:
django 1.5 이후 태그 추가:

{% verbatim myblock %} {% endverbatim myblock %}
이 탭 에 포 함 된 코드 는 Django 의 템 플 릿 엔진 에 렌 더 링 되 지 않 습 니 다.
따라서{{}}이 있 는 Vue 코드 를{%verbatim my block%}탭 사이 에 놓 을 수 있 습 니 다.예 를 들 어:

<div id="app1">
  {% verbatim myblock %}
    {{ message1 }}
  {% endverbatim myblock %}
</div>
해결 방법 2:
Vue 의{{}을{[]}으로 변경 합 니 다.

<script>Vue.config.delimiters = ["{[", "]}"]</script>
사용 시:

<div id="app1">
  {[ message1 ]}
</div>
ps:vue 의 django 와 vue 문법 충돌 처리
vue.js 의 기본 바 인 딩 기 호 를 수정 합 니 다.
vue 2.0 은 이미 이러한 표기 법 을 폐기 했다.

Vue.config.delimiter=['[[',']]'];
정확 한 자세:

var vm = new Vue({
  delimiters:['[[', ']]'],
  el:'#box',
  data:{
    arr:['apple','pear','grape']
  },
  methods:{
    add:function () {
      this.arr.push('tomato')
    }
  }
})
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Django 와 Vue 문법의 충돌 문 제 를 완벽 하 게 해결 하 는 방법 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
nodejs 사이트 이미지 추출 기능 실현
springcloud config 설정 읽 기 우선 순위 과정 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage