日报2025317

今日正式开始学习Springboot+vue

一、项目精简：

setup是必备的属性，有了才能使用vue3的语法特性
//删去AboutView，改名Hone，内容修改

精简路由

App.view只保留入口功能


修改好了

二、语法练习

<template>
  <div style="font-size: 20px; font-weight: bold;">
    Kochiya Sanae！！！！！
  </div>


  <div style="font-size: 20px;font-weight: bold;color: orangered">
    {{a}}
  </div>


  <div style="font-size: 20px;color: yellow">
    {{data.a}}
    {{data.b}}
  </div>
<!--v-model 可以实现数据的双向绑定-->
  <div >
    <input v-model="data.a"/>
  </div>
<!--v-if     判断-->
  <div>
    <span style="font-size: 20px;  color: blue"v-if="data.name==='Izayoi_Sakuya'">Izayoi Sakuya</span>
  </div>

  <!--v-for  循环-->
  <div style="display: flex">
    <div style="font-size: 20px;color: darkcyan" v-for="item in data.arr">{{item}}&nbsp</div>
  </div>


  <!--@(v-on:) 事件绑定-->
  <div>
    <button v-on:click="click">Ring~</button>
  </div>

  <!--v-bind-->
  <div>
<!--    <div :style="{'width':'100px','height':'100px','backgroundColor':'pink'}"></div>-->
    <div :style="data.box"></div>
  </div>

</template>


<script setup>
import {reactive, ref} from "vue";

const a=ref('Hakure Remu')
const data =reactive(
    {
      a:123,
      b:456,
      name:'Izayoi_Sakuya',
      arr:['Konpaku ','Youmu'],

      box:{
        width:'100px',
        height:'100px',
        backgroundColor:'blue'
      }
    }
)


const click=()=>{
  alert("Koishi is behind you！")
}

</script>

主要是v的几个特殊语法