Django と Vue の構文間の競合を解決する方法

この記事では、主に Django と Vue の間の構文の競合に対する完璧な解決策を紹介します。必要な場合は参考にしてください。

Django Web フレームワークで vue を使用すると、構文の競合が発生します。

vue は {{}} を使用し、django も {{}} を使用するため、競合が発生します。

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 Fuzzyクエリ機能

Nodejsの暗号モジュールのセキュリティ知識について(詳細なチュートリアル)

angularjsでページングと検索機能を実装する方法

以上がDjango と Vue の構文間の競合を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。