vue3 演示，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7

            
            <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js" type="application/javascript"></script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11

            
            html {
  height: 100%;
}
body {
  height: 100%;
  background: #212121;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

格式化

            
                1
2
3
4
5
6
7
8
9

            
            const { createApp } = Vue

createApp({
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
}).mount('#app')

预览

控制台