参考官网的，再试一下，vue官网代码，两种方法，一种是vscode，失败，一种是用浏览器运行，还没试

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://unpkg.com/[email protected]/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="counter">
        Counter: {
    
    {
    
     counter }}
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
  </body>
</html>

main.js

const Counter = {
    
    
    data() {
    
    
      return {
    
    
        counter: 0
      }
    }
  }
  
  Vue.createApp(Counter).mount('#counter')

用vscode运行，不行，改一下，用浏览器试一试

合起来，代码

<!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/[email protected]/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="counter">
        Counter: {
    
    {
    
     counter }}
    </div>

    <!-- Import Js -->
    <script>
    const Counter = {
    
    
        data() {
    
    
            return {
    
    
                counter: 0
            }
        }
    }
    
    Vue.createApp(Counter).mount('#counter')

    </script>
  </body>
</html>

参考官网的，再试一下，vue官网代码，两种方法，一种是vscode，失败，一种是用浏览器运行，还没试

猜你喜欢