Methoden in einem eigenständigen (einzelnen) Vue3 SPA unter Verwendung der Compose-API
P粉106711425
P粉106711425 2024-03-26 23:28:38
0
1
373

Ich schreibe (Amateur-)Vue3-Anwendungen (*), indem ich den Projektinhalt boote und ihn dann für die Bereitstellung erstelle. gute Ergebnisse.

Ich muss eine eigenständige einzelne HTML-Seite erstellen, die direkt in den Browser geladen werden kann. Ich habe dies vor ein paar Jahren getan, als ich anfing, Vue zu verwenden (während des Übergangs von v1 zu v2), und ich habe sofort die richtige Dokumentation gefunden.

Ich kann keine ähnlichen Vue3- und Composition-APIs finden.

Was ist eine Frame-Seite, die den Wert einer reaktiven Variablen {{hello}} (我将在完整的构建应用程序的上下文中在 <script setup> wie in)

definiert anzeigt?

So habe ich es früher gemacht (ich hoffe, ich habe es richtig gemacht)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2"></script>
</head>
<body>

<div id="app">
    {{hello}}
</div>

<script>
    // this is how I used to do it in Vue2 if I remember correctly
    new Vue({
        el: '#app',
        data: {
            hello: "bonjour!"
        }
        // methods, watch, computed, mounted, ...
    })
</script>

</body>
</html>

(*) Eigentlich verwende ich das Quasar-Framework, aber das ändert nichts am Kern meines Problems.

P粉106711425
P粉106711425

Antworte allen(1)
P粉633733146

根据官方文档,您无法使用 CDN 来使用脚本设置一>:

但是您可以在页面脚本中使用设置挂钩,如下所示:

const {
  createApp,
  ref
} = Vue;
const App = {
  setup() {
    const hello = ref('Bonjour')


    return {
      hello
    }

  }


}
const app = createApp(App)
app.mount('#app')


{{hello}}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage