4、命令式和声明式

imkaifan2024-08-13 16:40

实现一个计数器

命令式：

javascript 复制代码

<!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>

声明式：

javascript 复制代码

<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>