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

最新推荐文章于 2023-12-21 15:20:41 发布

请叫我算术嘉

最新推荐文章于 2023-12-21 15:20:41 发布

阅读量4.8k

点赞数 1

分类专栏： Vue.js Django 文章标签： vue django

本文链接：https://blog.csdn.net/ssjdoudou/article/details/104684184

版权

Django 同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

Vue.js

28 篇文章 3 订阅

订阅专栏

其实用vue的话最好是搭建脚手架，不推荐用h5的方式写vue

但是初学者可以用html快速领略到vue的魅力

如何在Django框架中使用带vue.js的html页面呢

新建一个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">
        {{ message }}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </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的{{ }} 为{[ ]}

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

然后

<!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>

不过，vue2.0已经废除这种写法，正确姿势如下

<!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>

请叫我算术嘉

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Django中使用Vue.js语法冲突解决方案

其实用vue的话最好是搭建脚手架，不推荐用h5的方式写vue但是初学者可以用html快速领略到vue的魅力如何在Django框架中使用带vue.js的html页面呢新建一个html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫