Question

这是我在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。

这个问题是我不知道如何使他们相处。例如，我添加了一个<h1>TEST</h1>，但是在加载Vue时它不会出现，因为Vue部件覆盖了它。我也听不懂，如果我对Django模板有条件，例如{% if user.is_authenticated %}，则无法在Vue上使用它，因为它不会被加载。

例如，我有一个导航栏。我想使用下面的Vue导航栏，而不是该导航栏，但是我不能，因为当前的导航栏具有指向我网站某些部分的链接，并且由于这些链接是用Django模板语言制作的，因此它们不会被Vue加载。

Answer 1

您应该了解，Vue是一个与后端无关的前端框架，而Django是一个后端框架（可以以与前端无关的方式使用，我认为这就是您的身份）尝试做）。

Vue的工作方式是将内容呈现在index.html中的div＃app标签内，这就是为什么h1标签不起作用的原因。您必须在正确的组件中的vue应用程序中包含h1标签才能正常工作（如果您使用的是诸如webpack等之类的东西，别忘了在编辑后重新编译组件）。

关于Django条件部分，关键是，现在，您的Vue应用程序是与Django App不同的应用程序（它们将必须使用HTTP调用通过API进行通信）。因此，为了使身份验证有效（或其他任何逻辑），您将必须在Vue应用和Django应用中都处理该逻辑

如何在Django中使用Vue模板？

1 个答案: