vue3+ts学习（一）：在html中使用vue

在html文件设置template配置项的两种方法

<div id="app"></div>
// 方法一：通过script设置type和id的方式配置
<script type="x-template" id="content">
    <h2>{{count}}</h2>
    <button @click='add'>+1</button>
    <button @click='reduce'>-1</button>
</script>
// 方法二：通过tempalte标签配置，该标签不会渲染在dom节点上
<template id="content">
    <div>
      <h2>{{count}}</h2>
      <button @click='add'>+1</button>
      <button @click='reduce'>-1</button>
    </div>
</template>
  
<script src="https://unpkg.com/vue@next"></script>
<script>
    const obj = {
      template:'#content',
      data(){
        return{
          count:100
        }
      },
      methods:{
        add(){
          this.count++;
        },
        reduce(){
          this.count--;
        }
      }
    }
    // vue3不再通过new Vue()创建Vue实例
    Vue.createApp(obj).mount("#app")
</script>