W250511/17.Vue3/project/src/components/Demo1.vue

<template>
  <div>
    <h2>Demo1</h2>
    <p>
      {{ tips }}
    </p>
    <button @click="changeTips">修改</button>
  </div>
</template>

<script lang="ts" setup name="hi">

/**
 * setup 不支持this
 * ref 基本数据类型 
 * 声明字段 自带value
 * 修改需要.value
 */
import {ref} from 'vue';
let tips = ref('今天星期日');
console.log(tips);
function changeTips() {
    // this.tips = 'haha';
    tips.value = '哈哈';
}
</script>
<!-- <script>
export default {
    name:"hi"
}
</script> -->
<!-- <script>
import { ref } from "vue";
export default {
  name:"hello",
  setup() {
    let tips = ref("哈哈");

    function changeTips() {
      // this.tips = 'haha';
      tips.value = "你好";
    }
    return {
      tips,changeTips
    };
  },
};
</script> -->
<style lang="scss" scoped>
</style>