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

最新推荐文章于 2023-06-27 11:35:52 发布

骑猪去兜风z1

最新推荐文章于 2023-06-27 11:35:52 发布

阅读量1.2k

点赞数 4

分类专栏： vue2&vue3 文章标签： vue.js django 前端

本文链接：https://blog.csdn.net/qq_52385631/article/details/126671102

版权

vue2&vue3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

项目场景：

在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>
<!--<script src="../js/vue.js"></script>-->
<!--<script src="../js/vue.min.js"></script>-->
<body>
<!--创建一个容器-->
<div id="app">
    <h1>vue {{msg}}</h1>
</div>
<!-- 创建一个vue实例，管理容器 -->
 
<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>