我是 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 組件嗎？
謝謝
uj5u.com熱心網友回復：
你不能vuejs-datepicker在 Vue3 中使用，你可以試試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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/438563.html