java学习--黑马SpringBoot3课程个人总结-2024-02-07

1.Vue的项目创建

---

启动vue

启动后的界面

2.Vue项目的开发流程

---

3.Vue的Api风格

代码如下
组合式Api

---

APP.vue

<!-- <script >
    // 写数据
    export default{
      data(){
        return {
          msg:'上海'
        }
      }
    }
</script> -->
<script setup>
  import {ref} from 'vue'
  //调用ref函数，调用响应式数据
  const msg=ref('西安')
  // 导入api.vue文件
  import Api from './Api.vue';

</script>
<template>
  <!-- html -->
  <h1> {{msg}}</h1>
  <br>
  <Api/>
</template>

<style scoped>
  /* 样式 */
  h1{
    color:red
  }
</style>

Api.vue

<script setup>
import {onMounted, ref} from 'vue'
    // 声明响应式数据ref,响应式数据有一个内部的属性value
    const count =ref(0);

    // 声明函数
    function increment(){
        count.value++;
    }

    //声明一个钩子函数onMounted
    onMounted(()=>{
        console.log('vue已经挂载完毕');
    })

</script>

<template>
    <!-- 写html元素 -->
    <button @click="increment ">count:{{ count }} </button>
</template>