Vue3（2）实现一个计数器功能（文本，属性，事件的绑定）

首先三个常用的指令，和vue2一样
v-text 简写为 {{}}
v-bind 简写为 ：
v-on 简写为 @

  <div id="app">
    <!-- 指令：vue提供的一些特殊的属性v-开头 -->
    <h1 
      v-bind:title="tit" 
      v-text="msg"
      v-on:click="showData"
      >
    </h1>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    /*
      1. 如何操作html文本
      2. 如何操作html属性（herf，src）
      3. 如何绑定事件
    */

    Vue.createApp({
      // 选项api(option api)
      data(){
        return {
          msg: "hello world",
          tit: "hello Vue3"
        }
      },
      methods: {
        showData(){
          alert("hello Vue3")    
        }
      },
    }).mount("#app")
  </script>

实现的效果，页面上有 hello world
鼠标移到上面显示 title 的 hello Vue3
点击弹出 hello Vue3 的框

  <div id="app">
    <button @click="decress">-</button>
    <span>{{msg}}</span>
    <button @click="incress">+</button>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          msg: "0"
        }
      },
      methods: {
        decress(){
          if(this.msg > 0){
            this.msg--
          }
        },
        incress(){
          this.msg++
        }
      },
    }).mount("#app")
  </script>

实现效果：
点击 - 按钮 数字减小（直到0不再减小）
点击 + 按钮 数字增加