vue3入门

第一个vue程序

<template>

  <div>{{ name1 }}</div>
  <div>{{ name2 }}</div>
  <button @click="test">弹窗</button>
  <button @click="updateName">修改</button>

</template>

<script>
import { ref } from 'vue'

    export default {
      name: 'App',
      //一切皆setup
      setup(){
        //伪响应式数据,ref返回的是一个对象
        let name1 = ref("tom")
        let name2 = ref("tom2")

        //伪方法
        function test(){
          alert(`my ${name1.value} or my ${name2.value}`)
        }
      
        function updateName(){
          name1.value = "xiaoming"
          name2.value = "xiaoming2"
        }

        //返回的对象可以在模版中直接使用
        return {
          name1,
          name2,
          test,
          updateName
        }
      }
    }
</script>