|
@@ -4,14 +4,22 @@
|
|
|
<meta charset="UTF-8" />
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>Vue3快速入门</title>
|
|
<title>Vue3快速入门</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ #app div{
|
|
|
|
|
+ display:none
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
- <div id="vue-app" >
|
|
|
|
|
- <div :style="{'display':'block'}" style="display:none">
|
|
|
|
|
|
|
+ <div id="app" >
|
|
|
|
|
+ <div :style="{'display':'block'}" >
|
|
|
{{text}}
|
|
{{text}}
|
|
|
- </div</div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
|
|
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
const app = Vue.createApp({
|
|
const app = Vue.createApp({
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
@@ -19,7 +27,7 @@
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
- app.mount("#vue-app");
|
|
|
|
|
|
|
+ app.mount("#app");
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
|
|
</html>
|
|
</html>
|
ming