vue.js - Vue.js 组件未在页面上直观显示
问题描述
我有以下名为 TeamCard 的 Vue 组件:
<template>
<div class="m-8 max-w-sm rounded overflow-hidden shadow-lg">
<!-- removed fro brevety -->
div class="text-gray-900 font-bold text-xl mb-2">{{ name }}</div>
<p class="text-gray-700 text-base"> {{ description }} </p>
<!-- removed fro brevety -->
</div>
</div>
</template>
<script>
export default {
name: "TeamCard",
props: {
name: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
}
};
</script>
<style scoped>
@import "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";
</style>
我通过以下方式在 HTML 页面(Spring 引导模板)中调用组件:
<teamCard v-bind:name="'Hawks'" v-bind:description="'Best team'" ></teamCard>
<script src="https://unpkg.com/vue"></script>
<script th:src="@{/TeamCard/TeamCard.umd.min.js}"></script>
<script>
(function() {
new Vue({
components: {
teamCard: TeamCard
}
})
})();
</script>
当我在浏览器中转到具有第二个片段的页面时,没有显示任何内容。控制台中没有错误。我究竟做错了什么?如何使组件显示?
解决方案
我从未见过 Vue 以这种方式使用,但看起来该应用程序没有安装元素。尝试这个:
<div id="app">
<team-card v-bind:name="'Hawks'" v-bind:description="'Best team'"></team-card>
</div>
和
(function() {
new Vue({
el: '#app',
components: {
teamCard: TeamCard
}
})
})();
推荐阅读
- oracle - oracle pragma SERIALLY_REUSABLE、RESTRICT_REFERENCES 和 INLINE
- javascript - 将 Highcharts 与 PerfectScrollbar 一起使用时,鼠标滚轮事件在 Firefox 中无法正常工作
- ios - 从第二个警报视图按“确定”时,进度 hud 未显示
- react-native - 不同堆栈导航器中的相同屏幕
- java - JVM(HotSpot)内在方法到底是什么?
- javascript - 如何使用 CSS Grids 制作自动平衡的内容列
- python - 更新字典中的引用变量不起作用
- node.js - NPM + 'DEBUG' 不是内部或外部命令、可运行程序或批处理文件
- java - Spring Boot Hibernate CRUD REST API 404 错误
- react-native - 反应原生构建失败 react-native-fbsdk