slot插槽 匿名插槽 & 具名插槽 子组件 <template>  <div>    <slot></slot>    <slot name="nameSlot"></slot>  </div>&…

全局组件 创建组件 GlobalComponent.vue <template> <h1>this is globalComponent</h1></template> 在 main.ts 中引入组件 import { createApp } from 'vue'import './style.css…

vue3 中的 v-model 是 props 和 emit 语法糖 props ： value --> modeValue event：input --> update:modelValue 默认的 v-model 子组件 <template>  <div class="container" v-show=…

使用 安装 yarn add @vitejs/plugin-vue-jsx 配置 vite.config.ts import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// ht…

动画属性 transition 通过 name 定义 class <template>  <button @click="flag = !flag">click</button>  <transition  name="xx">    <div …

slot插槽 匿名插槽 & 具名插槽 子组件 <template>  <div>    <slot></slot>    <slot name="nameSlot"></slot>  </div>&…

父子组件传值 子组件 <template>  <div>this is childComponent {{ title }}</div></template><script setup lang="ts">// 常规defineProps({   title:Strin…

生命周期 Vue3 setup 替代了 beforeCreate 和 created 两个生命周期 挂载onBeforeMountonMounted更新onBeforeUpdateonUpdated销毁onBeforeUnmountonUnmount 打印当前组件实例 <script setup lang="ts">import {ge…

计算属性 方式一 <script setup lang="ts">import {computed ,ref} from "vue"const name = ref("你好")const helloName = computed(()=>name.value+"vue3"); // 你好 vue3</script> 方…

toref 原始数据不会更新视图，数据会更新 <template>  <div>this is hello world</div>  <h1>{{ state }}</h1>  <button @click="handelClick">click&…