时间戳

首页 > 解决方案 > 在单页 vuejs 中使用组件

vuejs3 - 在单页 vuejs 中使用组件

问题描述

我在 html 页面中使用 vuejs 3.0 进行绑定，它非常有用。我知道几乎开发人员使用应用程序，而不是这种方式，但我需要了解，应该有一种方法可以在创建项目的页面中加载组件（插件）。可能是一个命令Vue.createApp(app).component('b-pagination-nav', BPaginationNav).mount('#app')

我尝试使用https://bootstrap-vue.org/docs/components/pagination-navt 为表格添加分页，但我失败了。如果可能的话，有人可以说我吗？


<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
   <table>
       <tr v-for="item in row ">
           <td>{{item}}</td>
       </tr>
   </table>
</div>


<script src="node_modules/vue/dist/vue.global.js"></script>
<script>
   const app = {
       data() {
           return { rows: ["fr","us","sp","it","pt"] }
       },
       methods: {
       },
   }
   Vue.createApp(app).mount('#app')
</script>
</body>
</html>

标签： vuejs3

解决方案

I can't say with confidence that I understand what you are asking, but I'm assuming you're trying to use Vue with uncompiled components.

You can link vue.global.js using the CDN. <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>. You can also link it locally, but you're likely getting errors locally because your path includes the node_modules folder which is likely not being served with the rest of your assets, so you can copy the vue library to your public or dist directory (or whatever you are using to serve)

You also have an issue here <tr v-for="item in row">, that should be rows not row

Example:

<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
   <table>
       <tr v-for="item in rows">
           <td>{{item}}</td>
       </tr>
   </table>
</div>

<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>
<script>
   const app = {
       data() {
           return { rows: ["fr","us","sp","it","pt"] }
       },
       methods: {
       },
   }
   Vue.createApp(app).mount('#app')
</script>
</body>
</html>

推荐阅读