如何在Django中使用Vue模板?

杰克022

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

Hamza Mogni

您应该了解,Vue是一个与后端无关的前端框架,而Django是一个与后端框架无关的后端框架(可以以与前端无关的方式使用,我想这就是您要尝试做的)。

Vue的工作方式是将内容呈现在index.html中的div#app标签内,这就是h1标签不起作用的原因。您必须在正确的组件中的vue应用程序中包含h1标签才能正常工作(在编辑后不要忘记重新编译组件,以防您使用诸如webpack之类的smthng等)。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档