vue.js的模板或部分继承

发布于 2025-02-11 23:33:41 字数 463 浏览 0 评论 0原文

我正在为我的投资组合使用HTML+CSS+JS创建客户端网站，几乎所有不同的URL中，我一直在复制标题和页脚。

我想知道是否有一种方法可以避免使用部分或模板（如轨道或烧瓶中使用），但使用vue.js 。

我的意思是，我希望我的HTML文件看起来像这样：

{% extends "base.html" %}

{% block content %}
<!--My HTML code for this file.html-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ex. Etiam fermentum lacus non convallis ultrices.</p>
{% endblock %}

原文

I'm making a client side website with only HTML+CSS+JS for my portfolio, I've been copy-pasting my header and footer in almost all the differents urls.

I would like to know if there is a way to avoid that using like a partial or template (as is used in Rails or Flask) but with Vue.js.

I mean, I want my HTML files look something like this:

{% extends "base.html" %}

{% block content %}
<!--My HTML code for this file.html-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ex. Etiam fermentum lacus non convallis ultrices.</p>
{% endblock %}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷情 2025-02-18 23:33:41

我使用vue.js组件解决了

//Header.js
export default {
  data() {
    return {}
  },
  template: `
    <header>
    <p>This is a header</p>
    </header>`
}

<!-- Any .html file -->
<body>
  <script src="https://unpkg.com/vue@3"></script>
  <script type="module">
    import Header from '../static/vue/Header.js'
    const { createApp } = Vue
    createApp(Header).mount('#header')
  </script>

  <div id="header"></div>

  ...

</body>

I solved using a Vue.js components
https://vuejs.org/guide/essentials/component-basics.html

//Header.js
export default {
  data() {
    return {}
  },
  template: `
    <header>
    <p>This is a header</p>
    </header>`
}

<!-- Any .html file -->
<body>
  <script src="https://unpkg.com/vue@3"></script>
  <script type="module">
    import Header from '../static/vue/Header.js'
    const { createApp } = Vue
    createApp(Header).mount('#header')
  </script>

  <div id="header"></div>

  ...

</body>

回复收藏 0 原文

~没有更多了~