Javascript 如何从VueJS中的HTML模板加载特定组件?
我使用webpack loader将VueJS添加到我的Django项目中。Vue可以工作,但我对它非常陌生,所以我很难理解它的结构 我有以下模板: django_template.html:这就是我加载Vue应用程序的地方Javascript 如何从VueJS中的HTML模板加载特定组件?,javascript,vue.js,Javascript,Vue.js,我使用webpack loader将VueJS添加到我的Django项目中。Vue可以工作,但我对它非常陌生,所以我很难理解它的结构 我有以下模板: django_template.html:这就是我加载Vue应用程序的地方 {% load render_bundle from webpack_loader %} {% block content %} <div id="app"> <app></app> </di
{% load render_bundle from webpack_loader %}
{% block content %}
<div id="app">
<app></app>
</div>
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'chart' %}
{% endblock %}
现在我的问题是:
如何仅调用特定组件而不是所有组件?我提供的代码将加载vue应用程序的所有组件,但由于我将vue与Django一起使用,在某个HTML页面上,我需要一些组件,在另一个页面上,我需要另一个组件。感谢您的任何建议 您可以选择成千上万的选项。 如果要禁用它们,最简单的方法就是使用
if/else
语句:
`Vue太棒了
哦,不,Django是如何告知您的VueJS应用程序要加载哪个组件的?Vue不太适合呈现经典的Django页面/路由。Vue是一个框架,用于构建;Django为整个Vue应用程序提供一次服务,然后通常只与浏览器中运行的Vue应用程序交换纯数据。SEO URL可以使用Vue进行模拟,但通常情况下,组件是否显示是使用条件呈现实现的,其中应用程序的状态决定哪些组件显示为DOM的一部分,哪些组件将被删除。除非您非常了解经典服务器端渲染与SPA渲染,否则我建议您坚持使用Django模板或使用Vue。谢谢您的回答!我不同意Vue仅适用于SPA,我很确定他们明确表示Vue也可以用于SSR应用或渐进式web应用。这就是网页包加载器的用途
<template><h1>This is the test component one</h1></template>
<template><h1>This is the test component two</h1></template>
<template>
<div>
<testComponent1></testComponent1>
<testComponent2></testComponent2>
</div>
</template>
<script>
import testComponent1 from "./components/testComponent1";
import testComponent2 from "./components/testComponent2";
export default {
name: "App",
components: {
'testComponent1': testComponent1,
'testComponent2': testComponent2,
},
};
</script>
import Vue from "vue";
import App from "./App.vue";
import axios from 'axios'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
vuetify: new Vuetify()
}).$mount("#app");