Question

我正在尝试学习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">

两个问题：

我该如何完成使用<v-toolbar>但使用<div>或其他 normal HTML标签的操作？
我应该避免完全使用普通的HTML标签吗？

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

Answer 1

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

什么是v-*？

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

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

什么是vuetify？

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

例如，

dark是所谓的prop or property，您可以从父实例/组件将其传递给组件。道具只能用在组件中，不能用在普通的HTML元素中，例如<div>。

现在，问题1：

如果您希望在Vuetify中使用白色文本和主要背景的div，则可以使用类代替道具。 Here's the documentation for Vuetify's color system。

因此，基本上您会收到以下示例：

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。

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

1 个答案:

什么是v-*？

什么是vuetify？

现在，问题1：

问题2：