随笔分类 - vue3基础
摘要：1.异步组件使用场景：vue为单页面应用，同步加载大量的页面代码会导致页面长时间处于空白情况。 <template> <div id="center"> <span>我是主体内容部分</span> <Suspense> <template #default> <C></C> </template>
阅读全文
摘要：1.默认插槽的使用： 子组件： <template> <div class="a"> <div>我是A子组件</div> <slot></slot> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; </sc
阅读全文
摘要：<template> <Headler></Headler> <div class="content"> <Menu ref="menus"></Menu> <Content></Content> </div> </template> <script setup lang="ts"> import
阅读全文
摘要：子组件： <template> <div>我是左侧内容<button @click="handleClick">向父组件派送数据</button></div> </template> <script setup lang="ts"> import { ref, reactive } from 'vu
阅读全文
摘要：父组件： <template> <Headler title="我是父组件传递的值" :list="list"></Headler> <div class="content"> <Menu></Menu> <Content></Content> </div> </template> <script
阅读全文
摘要：<template> <div>{{ obj.name }}</div> <div>{{ obj.age }}</div> </template> <script setup lang="ts"> import { ref, reactive, onBeforeMount, onMounted, o
阅读全文
摘要：1.watchEffect：会自动调用一次，具有惰性； <template> <div>{{ obj.name }}</div> <div>{{ obj.age }}</div> </template> <script setup lang="ts"> import { ref, reactive,
阅读全文
摘要：1.watch的基本使用 <template> <div>{{ obj.name }}</div> <div>{{ obj.age }}</div> <button @click="handleClick">修改</button> </template> <script setup lang="ts
阅读全文
摘要：1.computed:当依赖的值发生修改时，执行的方法，如果未发生改变，则使用缓存的值 函数的形式： <template> <div>{{ obj.name }}</div> <div>{{ obj.age }}</div> <div>{{ age }}</div> </template> <scr
阅读全文
摘要：1.toRef:从响应式对象上，创建一个新的ref对象 <template> <button @click="onChangeMsg">修改数据</button> <div>{{ obj.name }}</div> </template> <script setup lang="ts"> impor
阅读全文
摘要：1.reactive:用来绑定复杂的数据类型：数组，对象等。 注意:reactive如果绑定的是基础类型数据会报错。 <template> <button @click="onChangeMsg">修改数据</button> <div>{{ obj.name }}</div> </template>
阅读全文
摘要：1.ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。 注意：被ref包装之后需要.value 来进行赋值，因为使用ref包装，返回的是一个对象，Ref TS对应的接口 <template> <button @click
阅读全文
摘要：1.在script标签中声明一个变量:message,可以直接在template模版中直接使用： <template> <div>{{ message }}</div> </template> <script setup lang="ts"> const message = "你好，vue3" </
阅读全文
