|
|
@@ -1,33 +1,44 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
- <title>Vue3快速入门</title>
|
|
|
- <style>
|
|
|
- #app div{
|
|
|
- display:none
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="app" >
|
|
|
- <div :style="{'display':'block'}" >
|
|
|
- {{text}}
|
|
|
- </div>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Vue3快速入门</title>
|
|
|
+ <style>
|
|
|
+ #app div {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div :style="{'display':'block'}">
|
|
|
+ {{text}}
|
|
|
</div>
|
|
|
- <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
|
|
|
- <script>
|
|
|
+ </div>
|
|
|
+ <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
|
|
|
+ <script>
|
|
|
+ const {ref, createApp ,onMounted} = Vue
|
|
|
+ const app = {
|
|
|
+ setup() {
|
|
|
+ const text = ref(0);
|
|
|
+ function aa(){
|
|
|
+ text.value=text.value+1
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ aa()
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ text,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ createApp(app).mount('#app')
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
|
|
|
- const app = Vue.createApp({
|
|
|
- data() {
|
|
|
- return {
|
|
|
- text: "今天就开始使用 Vue.js！",
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
- app.mount("#app");
|
|
|
- </script>
|
|
|
- </body>
|
|
|
</html>
|
ming