Django使用Vue.js语法冲突解决方案

武飞扬头像

骑台风走

2024-03-19 帮助1人

项目场景：

在django中使用vue，但是对应的语法没有出现效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<body>
<div id="app">
<h1>vue {{msg}}</h1>
</div>
<script>
//阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
new Vue({
el: '#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data() {//data中用于存储数据，数据供el所指定的容器去使用
return {
msg: 'hello'
}
},
})
</script>
</body>
</html>

学新通

原因分析：

这是因为django自带的模板语言的语法和vue的语法冲突了，有两种解决方案

解决方案：

方案一：

在django1.5以后,加入了标签:

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

例如:

被此标签包裹的代码将不会被Django的模板引擎渲染。

因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn vue</title>
<script src="/static/vue/vue.js"></script>
<script>Vue.config.productionTip=false</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
{% verbatim %}
<div id="app">
{{ message }}
</div>
{% endverbatim %}
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

学新通

方案二：

修改Vue的{{ }} 为{[ ]}

vue弃用了这种方法

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

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn vue</title>
<script src="/static/vue/vue.js"></script>
<script>Vue.config.productionTip=false</script>
<script>Vue.config.delimiters = ["{[", "]}"]</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{[ message ]}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

学新通

正确写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn vue</title>
<script src="/static/vue/vue.js"></script>
<script>Vue.config.productionTip=false</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
[[ arrlist ]]
</div>
<script type="text/javascript">
var app = new Vue({
delimiters:['[[', ']]'],
el: '#app',
data: {
message: 'Hello Vue!',
arrlist: 'Hello Vue!'
},
methods:{
add:function () {
this.arrlist.push()
}
}
});
</script>
</body>
</html>

学新通

本文借鉴

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhfgkfef

系列文章

同类精品