Vue.js

Question

我刚刚正在浏览一些 Vue.js 代码 HERE。并遇到以下 Vue.js + PUG 代码，基本上它只是 PUG 模板：

menu-dropdown.task-dropdown(
  v-if="!isRunningYesterdailies",
  :right="task.type === 'reward'",
  ref="taskDropdown",
  v-b-tooltip.hover.top="$t('options')"
)

现在，当 PUG 中出现类似下面的内容时，我了解到将输出带有类的 div。

.d-flex.justify-content-between

但是，当某些内容前面没有 . 时呢？这是什么意思？

就像 menu-dropdown 到底是什么，我以为它是一个组件，但是当我查看文件底部时，我没有看到名为 .menu-dropdown 的组件，IE 我只看到以下组件已加载：

components: {
  approvalFooter,
  approvalHeader,
  MenuDropdown,
},

那么 .menu-dropdown 是从哪里来的呢？

Answer 1

看起来没有前导点，pug 渲染了一个组件

<menu-dropdown class="task-dropdown" ...more data here../ ></menu-dropdown>

Vue 在内部自动创建一个从 user-name 到 UserName 的别名，反之亦然，因此您可以使用任何您喜欢的别名。一般最好在JavaScript中使用UserName，在模板中使用user-name。

Vue.js - Vue.js + Pug 中未定义的组件如何工作

How do undefined components work in Vue.js - Vue.js + Pug

javascript

pug