初始前端1

<script setup></script>  对应js
<template></template> 只能有一份 ，另外两个任意  对应html
<style scoped></style>  对应 css

<script setup>
import { onMounted, ref } from "vue";  //引用vue的函数
/* 组合式开发 */
  //代表count2初始值为0
const count2 = ref(0); //ref响应式赋值,模型改变视图会立即渲染,修改多次渲染多次，通俗就是，点击数字会变化
const demo2 = () => {
  count2.value++;    响应式 要用.value进行操作
};
  let count3 = 0; //不是响应是赋值，第一次会渲染视图，但是后面对数据的修改视图不会渲染 ，点击数字无变化
const demo3 = () => {
  count3++;
};
onMounted(() => {
  console.log("页面挂在完成。。。");
});
</script>
<template>
  <h1>组合式开发</h1>
  <button @click="demo2">click:{{ count2 }}</button>  {{ count2 }} vue中的插值表达式
  <button @click="demo3">click:{{ count3 }}</button>
</template>
<style scoped></style>

<script setup>
import Dev1XXS（文件名） from "./Pages/Dev1XXS.vue（路径）";  导入导入其他组件，当前组件能够使用Dev1XXS组件的功能和 UI
</script>
// 模板只能有一份
<template>
  <Dev1XXS></Dev1XXS>    //写模板  定义组件的 UI 结构 将Dev1XXS组件渲染到当前组件的位置；标签中间能否插入内容要根据属性决定
</template>
<style scoped></style>