VUE3-JANGO-delimiters 分隔符冲突解决方案

最新推荐文章于 2024-09-06 16:18:40 发布

申瑞小强

最新推荐文章于 2024-09-06 16:18:40 发布

阅读量531

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39063476/article/details/85111404

版权

最近偶感无聊，跟着学习视频学习django框架搭建WEB服务器。但是由于视频资料较老，使用的VUE2.0模板框架，在学习过程中遇到诸多不便。一些问题的处理方法到了VUE3已经失效。

询问万能的百度发现相关资料甚少，无从查得，后经过查询官方文档后获悉对应修改方法。特此记录，方便后来者快速解决问题，同时满足个人小小的虚荣心。

在VUE2版本提到用标签包裹，或者使用以下方式修改分隔符, 但是VUE3同样操作并不生效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 导入VUE -->
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
</head>
    [[ message ]]
<body>
</body>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            delimiters:['[[', ']]'],
            data: {
                message: 'Hello Vue!'
            }
        });
</script>
</html>

经查询VUE3的正确使用方法如下，通过配置VUE3实例对象的方式修改分隔符：

app.config.compilerOptions.delimiters = ['${', '}']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 导入VUE -->
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
</head>
<body>
    [[ message ]]
</body>
<script type="text/javascript">
    const app = createApp({
        // 自身的选项
        msg: 'Vue',
    })
    // 分隔符改为ES6模板字符串样式
    app.config.compilerOptions.delimiters = ['${', '}']
    app.mount('#app')
</script>
</html>

以上为参考官方文档，代码为示意代码，如果错误，请及时指正。

参考文档：

应用实例 API | Vue.js (vuejs.org)