HTML使用vue3
# 前言
作为前端小白，Vue新手，怎么在HTML使用Vue3不知道，只好先记个笔记先。
# 如何在单页中使用Vue3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3</title>
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>
{{ state1 }}
</div>
<div>
{{ message }}
</div>
<div>
{{ num }}
</div>
<input type="text" name="" id="" placeholder="输入" v-model="input1"><br/>
<input type="text" name="" id="" placeholder="输入" v-model="input2"><br/>
<div>
input1:{{ input1 }}
</div>
<div>
input2:{{ input2 }}
</div>
<button @click="btn1">
点我
</button>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
<script>
const { createApp, reactive, toRefs, ref, onMounted } = Vue;
const app = createApp({
setup() {
var state1 = ref(123)
var input2 = ref(123)
const state = reactive({
message: 12,
num: 1,
input1: ''
})
onMounted(()=>{
console.log(2222)
})
const btn1 = () => {
console.log(state1)
console.log(input2)
console.log(state)
state1.value++
state.num++
}
return {
...toRefs(state),
state1,
input2,
btn1
}
}
});
app.mount("#app");
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# 如何在单页中使用element ui
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<title>Element Plus demo</title>
</head>
<body>
<div id="app">
<el-button>{{ message }}</el-button>
</div>
<script>
const App = {
data() {
return {
message: "Hello Element Plus",
};
},
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
更新时间: 2023/2/10 09:50:10