當(dāng)我們?cè)赿jango web框架中,使用vue的時(shí)候,會(huì)遇到語(yǔ)法沖突.
因?yàn)関ue使用{{}},而django也使用{{}},因此會(huì)沖突.
解決辦法1:
在django1.5以后,加入了標(biāo)簽:
{% verbatim myblock %} {% endverbatim myblock %}
被此標(biāo)簽包裹的代碼將不會(huì)被Django的模板引擎渲染。
因此,我們可以把帶有{{ }} 的Vue代碼放在 {% verbatim myblock %}標(biāo)簽中間,例如:
<div id="app1"> {% verbatim myblock %} {{ message1 }} {% endverbatim myblock %} </div>
解決辦法2:
修改Vue的{{ }} 為{[ ]}
<script>Vue.config.delimiters = ["{[", "]}"]</script>
使用的時(shí)候:
<div id="app1"> {[ message1 ]} </div>
ps:vue之django 和vue語(yǔ)法沖突處理
修改vue.js的默認(rèn)的綁定符號(hào)
vue2.0已經(jīng)廢棄這種寫法:
Vue.config.delimiter=['[[',']]'];
正確姿勢(shì):
var vm = new Vue({ delimiters:['[[', ']]'], el:'#box', data:{ arr:['apple','pear','grape'] }, methods:{ add:function () { this.arr.push('tomato') } } })
總結(jié)
以上所述是小編給大家介紹的Django與Vue語(yǔ)法的沖突問題完美解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com