时间戳

首页 > 解决方案 > 了解 v-stuff 内部和外部的 Vuetify

html - 了解 v-stuff 内部和外部的 Vuetify

问题描述

我正在尝试学习 Vuetify，文档很棒。但它与标准 HTML / JS 的区别如此之大，以至于仍然有很多“缺失”的文档。

具体来说，我应该如何标记<v-things>与<normal HTML tags>？

例如，如果我添加dark到<v-things>，则该 HTML 标记将具有突出的白色文本（在深色背景下）：

<v-toolbar color="primary" dark>

上面的 HTML 标记，因为它以 开头<v-...，所以可以使用“魔术词”color和dark. 这将使该工具栏中的所有内容都使用我的"primary"主题颜色作为背景，并使用白色作为文本。

我将如何在一个<div>或其他一些非 Vuetify 特定的标签中做同样的事情？

例如，

<div color="primary" dark>

不管用。那么，我应该怎么做才能做到这一点呢？以下是我的第一个猜测，但没有奏效：

<div class="primary dark">

两个问题：

  1. 我将如何完成我使用<v-toolbar>, 但使用<div>或任何其他普通HTML 标记所做的事情？
  2. 我应该完全避免使用普通的 HTML 标签吗？

关于上面的（2）：我在登录页面上有一些文本，在用户尝试登录之前它是空的。然后<div>会填充来自服务器的消息，或者说“成功登录”或“登录失败”。我想用“成功”或“错误”颜色主题为它们着色。我不应该使用<div>吗？我该怎么做？

标签： htmlcssvuetify.js

解决方案

好吧，有人问了一些问题，所以我会尽力解释一切。

什么是 v-*？

在 vue.js 中，有这些东西叫做components。

组件提供了一种将代码分成可重用的部分的方法，这些部分可以在应用程序中捆绑在一起。它们呈现常见的 HTML 标签（Vuetify 还添加了用于样式的类），但在 Vue 中，您可以随意调用它们。

什么是 Vuetify？

Vuetify 是一个组件库，这些v-things只是您可以使用的组件，每个组件都有一项工作要完成。

dark，例如，是所谓的 aprop或property您可以从父实例/组件传递给组件的东西。道具只能在组件中使用，而不能在普通的 HTML 元素中使用，例如<div>.

现在，对于第 1 个问题：

如果您想div在 Vuetify 中使用白色文本和主要背景，您将使用类而不是道具。这是 Vuetify 颜色系统的文档。

所以，基本上你得到这个例子：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main class="pa-5">
        <div class="pa-4 primary white--text">
          I'm a blue div with white text!
        </div>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
</body>

问题2：

在大多数情况下，您会希望使用 Vuetify 提供的组件，但有时您可以简单地使用类来获得所需的样式。

您根本不需要删除普通的 HTML，只需按照您认为合适的方式使用它。您仍然需要<p>用于段落，并且可以<strong>用于粗体文本。
但是对于诸如按钮和菜单之类的常见事物，Vuetify 为它们提供了漂亮的样式和所有 javascript 功能，因此您可以使用组件而不是普通的 HTML。

推荐阅读