4、命令式和声明式
实现一个计数器
命令式：
<!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 = 0let containerDom = document.querySelector('#app')containerDom.innerHTML = contoutcontainerDom.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>