实现一个计数器
命令式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<!-- <script type="module" src="/src/main.ts"></script> -->
<script>
let contout = 0
let containerDom = document.querySelector('#app')
containerDom.innerHTML = contout
containerDom.addEventListener(
'click',
function () {
contout++
containerDom.innerHTML = contout
},
false
)
</script>
</body>
声明式：
<template>
<div>
<h1>hi {{msg}}</h1>
<div @click="add"> {{count}}</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
data () {
return {
msg: "vue js",
count: 1
}
},
methods: {
add () {
this.count++
}
},
})
</script>
<style>
</style>