How to solve the conflict between Django and Vue syntax

This article mainly introduces the perfect solution to the syntax conflict between Django and Vue. This article shares two solutions with you. Friends in need can refer to it

When we are in the django web framework, When using vue, you will encounter syntax conflicts.

Because vue uses {{}} and django also uses {{}}, there will be conflicts.

Solution 1:

After Django 1.5, a tag was added:

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

The code wrapped by this tag will not be rendered by Django's template engine.

Therefore, we can put the Vue code with {{ }} in the middle of the {% verbatim myblock %} tag, for example:

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

Solution 2:

Modify Vue's {{ }} to {[ ]}

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

When used:

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

ps: Vue's django and vue syntax conflict handling

Modify the default binding symbol of vue.js

vue2.0 has abandoned this writing method:

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

Correct posture:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use cdn optimization in vue

How to determine the file type size in js

How to implement sliding verification required for login in js

How to implement fuzzy query function of drop-down box in Angular

Security knowledge about crypto modules in Nodejs (detailed tutorial)

How to implement paging and search functions in angularjs

The above is the detailed content of How to solve the conflict between Django and Vue syntax. For more information, please follow other related articles on the PHP Chinese website!