动画属性 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&…

用来绑定复杂的数据类型 如 对象 数组无需 .value 操作 基本使用 <template>  <div>this is hello world</div>  <h1>{{ obj.name }}</h1></template><script set…

基本用法 ref <template> <h1>{{data.name}}</h1></template><script setup lang="ts">import {ref} from "vue"const data = ref({name:'zhangsan'})data.name.…

场景：在使用 ListView 组件时候，如果渲染多个 input 组件，在滚动时会出现 input 的值被销毁； 原因在于 listView 组件的垃圾回收机制，如果子组件脱离了视口会在内存中销毁，等下次会被重新渲染 使用 SingleChildScrollView 替代 ListView SingleChildScrollView ( chil…

引用 flutter 自带的 services 组件 import 'package:flutter/services.dart' 使用在 main.dart 中 包裹 runApp 组件中 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]).th…