使用 vuejs3 CDN 在页面中声明外部组件的正确方法

发布于 2025-01-12 00:58:05 字数 1848 浏览 0 评论 0原文

我是一名 ASL.NET Core 开发人员，我尝试使用 vuejs 来创建一些复杂的表单。为了学习如何使用它，我创建了静态 html 文件，以了解组件在 vuejs 中的工作原理。我有以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue 4 Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>

    <script src="https://unpkg.com/vuejs-datepicker"></script>

    <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
    
    <script>
        const app = Vue.createApp({
            data: () => ({
                example1: {
                  value: 0,
                  options: ['Batman', 'Robin', 'Joker']
                }        
            }),
            template: `<h2>Hello with Vue CDN</h2>
            <vuejs-datepicker></vuejs-datepicker>

            <div class="example">
                <h3 id="example-1">#1 - Single select</h3>
                <div class="output">Data: {{ example1.value }}</div>
                <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
            </div>`
        });
        app.component('Multiselect', VueformMultiselect)
        app.mount("#app")
    </script>
</body>
</html>

在此示例中，我将 CDN 用于 vuejs 3、vuejs-datepicker 和多选。我使用 app.component('Multiselect', VueformMultiselect) 命令使多选组件能够工作。我可以理解它，因为我打开了 js 文件，发现了以下代码

var VueformMultiselect=function(e,t).......

，结果是使用 VueformMultiselect 对象添加一个组件。

我检查了 vuejs-datepicker 代码，但找不到类似的内容以便在我的应用程序中声明它。有人可以帮助我为我的代码声明 vuejs-datepicker 组件吗？

谢谢

原文

I am an ASL.NET Core developer and I try to use vuejs in order to create some complex forms. In order to learn how to use it I create static html files in order to understand how the components work in vuejs. I have the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue 4 Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>

    <script src="https://unpkg.com/vuejs-datepicker"></script>

    <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
    
    <script>
        const app = Vue.createApp({
            data: () => ({
                example1: {
                  value: 0,
                  options: ['Batman', 'Robin', 'Joker']
                }        
            }),
            template: `<h2>Hello with Vue CDN</h2>
            <vuejs-datepicker></vuejs-datepicker>

            <div class="example">
                <h3 id="example-1">#1 - Single select</h3>
                <div class="output">Data: {{ example1.value }}</div>
                <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
            </div>`
        });
        app.component('Multiselect', VueformMultiselect)
        app.mount("#app")
    </script>
</body>
</html>

In this example I use CDNs for vuejs 3, vuejs-datepicker and multiselect. I made multiselect component to work using the app.component('Multiselect', VueformMultiselect) command. I can understand it because I opened the js file and I found the following code

var VueformMultiselect=function(e,t).......

This has as a result to add a component by using the VueformMultiselect object.

I checked the vuejs-datepicker code and I cannot find something similar in order to declare it in my application. Can someone help me declare the vuejs-datepicker component for my code?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨轻弹 2025-01-19 00:58:05

你不能在Vue3中使用 vuejs-datepicker ，你可以尝试使用 vue3datepicker ：

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
  const app = Vue.createApp({
      data: () => ({
          example1: {
            value: 0,
            options: ['Batman', 'Robin', 'Joker'],
          },
          selDate: null
      }),
      components: { Datepicker: Vue3DatePicker,  Multiselect: VueformMultiselect },
      template: 
        `<h2>Hello with Vue CDN</h2>
          <datepicker v-model="selDate"></datepicker>
          <div class="output">Data: {{ selDate }}</div>
          <div class="example">
              <h3 id="example-1">#1 - Single select</h3>
              <div class="output">Data: {{ example1.value }}</div>
              <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
          </div>`
  });
  app.mount("#app")
</script>

You can not use vuejs-datepicker in Vue3, you can try with vue3datepicker :

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
  const app = Vue.createApp({
      data: () => ({
          example1: {
            value: 0,
            options: ['Batman', 'Robin', 'Joker'],
          },
          selDate: null
      }),
      components: { Datepicker: Vue3DatePicker,  Multiselect: VueformMultiselect },
      template: 
        `<h2>Hello with Vue CDN</h2>
          <datepicker v-model="selDate"></datepicker>
          <div class="output">Data: {{ selDate }}</div>
          <div class="example">
              <h3 id="example-1">#1 - Single select</h3>
              <div class="output">Data: {{ example1.value }}</div>
              <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
          </div>`
  });
  app.mount("#app")
</script>

回复收藏 0 原文

~没有更多了~