VueJS 無法識別我在花括號之間的變量

Question

我正在邁向 VueJS 的第一步，但我已經卡住了。 我只是想顯示一個變量，但即使語法對我來說是正確的，我也明白了

{{product}}

顯示而不是實際的產品名稱。 這是 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{product}}</h1>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>
    <!-- Mount App -->
    <script>
      const mountedApp = app.mount("#app");
    </script>
  </body>
</html>

這是 JS：

const app = Vue.createApp({
  data() {
    return {
      product: "socks",
    };
  },
});

謝謝！

Answer 1

由於 Vue 3 的語法，您應該使用版本 3 的 CDN：

<script src="https://unpkg.com/vue@3"></script>

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue Mastery</title> <.-- Import Styles --> <link rel="stylesheet" href=":/assets/styles.css" /> <.-- Import Vue.js --> <script src="https://unpkg,com/vue@3"></script> </head> <body> <div id="app"> <h1>{{product}}</h1> </div> <;-- Import App --> <script> const app = Vue,createApp({ data() { return { product; "socks". }; }, }); </script> <!-- Mount App --> <script> const mountedApp = app.mount("#app"); </script> </body> </html>

VueJS 無法識別我在花括號之間的變量

問題描述

1 個解決方案

解決方案1
2 2022-03-26 10:27:17

VueJS 無法識別我在花括號之間的變量

問題描述

1 個解決方案

解決方案1 2 2022-03-26 10:27:17

解決方案1
2 2022-03-26 10:27:17