data选项声明-vite项目

新建App.vue,内容如下

<script>
  
  export default{
    //data选项声明响应式状态，必须是返回一个对象的函数
    data(){
      return{
        //声明状态属性，属性名不能以$和_开头，内置使用保留，不让我们声明使用
        msg:'我是谁',
        age:18,
        salary:99.99,
        staff:{//对象
          id:1,
          name: '梦',
          hobbies:['台球','足球']
        }
      }
    },methods:{
      say(){
        this.msg='msg',
        this.staff.hobbies.push('篮球')
      }
    }

  }
</script>

<template>
  <div>
    {{ msg }}=={{ age }}=={{ salary }}=={{ staff.name }} =={{ staff.hobbies }}
    <button @click="say">说一说</button>
  </div>
</template>

<style scoped>

</style>

运行npm run dev

浏览器，打开效果如下：

点击说一说，staff 数组里面hobbies会增加一个篮球，并且改变msg 的值为msg

ps: 如果vite 里面有多个.vue 文件，想运行其中一个，可以通过修改main.ts文件里面import App from './App.vue' ，单引号的值。如下图