这是我在Django的索引页
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<meta charset="UTF-8">
<title>My test</title>
</head>
<body>
<div id="app">
<h1>TEST</h1>
</div>
{% render_bundle 'main' %}
</body>
</html>
这是标准的Vue导航栏。
<template>
<v-app id="sandbox">
<v-navigation-drawer
v-model="primaryDrawer.model"
:clipped="primaryDrawer.clipped"
:floating="primaryDrawer.floating"
:mini-variant="primaryDrawer.mini"
:permanent="primaryDrawer.type === 'permanent'"
:temporary="primaryDrawer.type === 'temporary'"
app
overflow
><v-switch
v-model="$vuetify.theme.dark"
primary
label="Dark"
></v-switch></v-navigation-drawer>
<v-app-bar
:clipped-left="primaryDrawer.clipped"
app
>
<v-app-bar-nav-icon
v-if="primaryDrawer.type !== 'permanent'"
@click.stop="primaryDrawer.model = !primaryDrawer.model"
></v-app-bar-nav-icon>
<v-toolbar-title>Vuetify</v-toolbar-title>
</v-app-bar>
</v-app>
</template>
该代码正在运行，当我打开Django网站时，我可以看到正在加载Vue。
问题是我不知道如何使他们相处。例如，我添加了a，<h1>TEST</h1>但是在我加载Vue时它不会出现，因为Vue部分覆盖了它。我也听不懂，如果我对Django模板有条件，例如{% if user.is_authenticated %}我不能在Vue上使用它，因为它不会被它加载。
例如，我有一个导航栏。我想使用下面的Vue导航栏，而不是该导航栏，但是我不能，因为当前的导航栏具有指向我网站某些部分的链接，并且由于链接是用Django模板语言制作的，因此它们不会被Vue加载。
您应该了解，Vue是一个与后端无关的前端框架，而Django是一个与后端框架无关的后端框架（可以以与前端无关的方式使用，我想这就是您要尝试做的）。
Vue的工作方式是将内容呈现在index.html中的div＃app标签内，这就是h1标签不起作用的原因。您必须在正确的组件中的vue应用程序中包含h1标签才能正常工作（在编辑后不要忘记重新编译组件，以防您使用诸如webpack之类的smthng等）。
关于Django条件部分，关键是，现在，您的Vue应用程序是与Django应用程序不同的应用程序（它们将必须使用HTTP调用通过API进行通信）。因此，为了使身份验证有效（或其他任何逻辑），您将必须在Vue应用程序和Django应用程序中都处理该逻辑
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句