Django與Vue語法的沖突問題完美解決方法
當(dāng)我們?cè)赿jango web框架中,使用vue的時(shí)候,會(huì)遇到語法沖突.
因?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語法沖突處理
修改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語法的沖突問題完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue+element搭建后臺(tái)小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺(tái)小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解
這篇文章主要為大家介紹了Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮
這篇文章主要介紹了在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮的方法，文中還通過實(shí)例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識(shí),需要的朋友可以參考下2020-03-03
從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue中循環(huán)請(qǐng)求接口參數(shù)問題及解決
這篇文章主要介紹了vue中循環(huán)請(qǐng)求接口參數(shù)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購物車動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購物車動(dòng)畫,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07