请注意，本文编写于 95 天前，最后修改于 67 天前，其中某些信息可能已经过时。
目录
1.vue3代码的引入
（1）cdn引入
html<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
（2）本地文件引入
html<script src="./vue.global.js"></script>
2.创建APP
（1）方式一
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script>
const ruiwiki = {
template: '<h2>123</h2>'
}
const app = Vue.createApp(ruiwiki);
app.mount("#app")
</script>
</body>
</html>
（2）方式二
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: '<h2>123</h2>'
}).mount("#app");
</script>
</body>
</html>
3.计数器
（1）JavaScript原生写法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
// 1.获取所有的元素
const counterEl = document.querySelector(".counter");
const incrementEl = document.querySelector(".increment");
const decrementEl = document.querySelector(".decrement");
// 2.定义变量
let counter = 0;
counterEl.innerHTML = counter;
// 3. 监听按钮的点击
incrementEl.addEventListener('click', () => {
counter += 1;
counterEl.innerHTML = counter;
})
decrementEl.addEventListener('click', () => {
counter -= 1;
counterEl.innerHTML = counter;
})
</script>
</body>
</html>
（2）vue3写法一
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: `
<div>
<h2>{{counter}}</h2>
<button @click='incrementEl'>+1</button>
<button @click='decrementEl'>-1</button>
</div>
`,
// 存储数据，声明数据
data: function() {
return {
counter: 0
}
},
// 声明方法
methods: {
incrementEl() {
this.counter += 1;
},
decrementEl() {
this.counter -= 1;
}
}
}).mount("#app");
</script>
</body>
</html>
（3）vue3写法二
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="why">
<div>
<h2>{{counter}}</h2>
<button @click='incrementEl'>+1</button>
<button @click='decrementEl'>-1</button>
</div>
</template>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
counter: 0
}
},
// 声明方法
methods: {
incrementEl() {
this.counter += 1;
},
decrementEl() {
this.counter -= 1;
}
}
}).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
