随笔分类 - Vue.js 3.0
摘要：
所以v-if生效时，v-show才生效，有if用if，没if就用show
阅读全文
所以v-if生效时，v-show才生效，有if用if，没if就用show
阅读全文
摘要：以2个变量为例： 方法一：使用多个 watch <script setup> import { ref, watch } from 'vue'; const count = ref(0); const name = ref(''); // 分别监听两个变量 watch(count, (newValu
阅读全文
以2个变量为例： 方法一：使用多个 watch <script setup> import { ref, watch } from 'vue'; const count = ref(0); const name = ref(''); // 分别监听两个变量 watch(count, (newValu
阅读全文
摘要：
rt。
阅读全文
rt。
阅读全文
摘要：
注意：本案例主针对props传参中存在多个类型下的传参研究 我有一个组件，需要给该组件传递参数height2 height2: { type: String || Number || Boolean, default: false, }, 在组件传参是这样的 <组件 :height2="60" />
阅读全文
注意：本案例主针对props传参中存在多个类型下的传参研究 我有一个组件，需要给该组件传递参数height2 height2: { type: String || Number || Boolean, default: false, }, 在组件传参是这样的 <组件 :height2="60" />
阅读全文
摘要：
比如： setTimeout(() => { window.scrollTo({ top: 300, }); },100); 要是html环境就不会这样，比如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
阅读全文
比如： setTimeout(() => { window.scrollTo({ top: 300, }); },100); 要是html环境就不会这样，比如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
阅读全文
摘要：
<template> <div class="parent"> <div v-for="(item, index) in items" :key="item.id" class="child" draggable="true" @dragstart="onDragStart(index)" @dra
阅读全文
<template> <div class="parent"> <div v-for="(item, index) in items" :key="item.id" class="child" draggable="true" @dragstart="onDragStart(index)" @dra
阅读全文
摘要：
在你的表格组件里面写一个方法function B，然后通过defineExpose来暴露给父组件页面A，例如： 表格组件 // 表格组件 // 检验并回调表格数据 const callBackData = () => { return [666]; } // 暴露回调方法 defineExpose(
阅读全文
在你的表格组件里面写一个方法function B，然后通过defineExpose来暴露给父组件页面A，例如： 表格组件 // 表格组件 // 检验并回调表格数据 const callBackData = () => { return [666]; } // 暴露回调方法 defineExpose(
阅读全文
摘要：
<template v-for="column in columns" :key="column.dataIndex" #[column.slotName]="{ record, rowIndex }"> <a-input v-model="record[column.slotName]" /> <
阅读全文
<template v-for="column in columns" :key="column.dataIndex" #[column.slotName]="{ record, rowIndex }"> <a-input v-model="record[column.slotName]" /> <
阅读全文
摘要：
rt。我调接口返回的数据使用reactive函数来设置的，并通过遍历把数组中的值绑定到了表单的v-model，当我改变v-model时，发现了无法赋值成功，或者说它这个reactive函数只生效了一次，赋值成功一次，比如我第一次输入1234，打印这个数组时，发现对应的v-model只拿到了1，其他的
阅读全文
rt。我调接口返回的数据使用reactive函数来设置的，并通过遍历把数组中的值绑定到了表单的v-model，当我改变v-model时，发现了无法赋值成功，或者说它这个reactive函数只生效了一次，赋值成功一次，比如我第一次输入1234，打印这个数组时，发现对应的v-model只拿到了1，其他的
阅读全文
摘要：
问题1：emit is not defined watch(() => content.value, (val) => { emit('input', val); }); 原因：直接使用了未定义的emit导致报错。 解决方案：使用vue3中的defineEmits函数定义一个可以定义触发的函数，比如
阅读全文
问题1：emit is not defined watch(() => content.value, (val) => { emit('input', val); }); 原因：直接使用了未定义的emit导致报错。 解决方案：使用vue3中的defineEmits函数定义一个可以定义触发的函数，比如
阅读全文
摘要：
我的watch写法： watch(props.value, (val) => { content.value = val; }); 然后控制台抛出了一个警告：无效的watch源：watch源只能是getter/effect函数、ref、响应对象或这些类型的数组。 原因：watch写法不正确导致。 解
阅读全文
我的watch写法： watch(props.value, (val) => { content.value = val; }); 然后控制台抛出了一个警告：无效的watch源：watch源只能是getter/effect函数、ref、响应对象或这些类型的数组。 原因：watch写法不正确导致。 解
阅读全文
摘要：
假如你的自定义组件是这样： <template> <div><slot></slot></div> </template> <script> export default { name: "tButton", }; </script> 那么怎么判断你在使用时，比如<t-button></t-butt
阅读全文
假如你的自定义组件是这样： <template> <div><slot></slot></div> </template> <script> export default { name: "tButton", }; </script> 那么怎么判断你在使用时，比如<t-button></t-butt
阅读全文
摘要：
我写了一个input组件（vue3） <template> <div> <input class="inp" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </templa
阅读全文
我写了一个input组件（vue3） <template> <div> <input class="inp" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </templa
阅读全文
摘要：
不生效样式： // template <div :style="tSwitchItemCss"></div> // script const tSwitchItemCss = computed(() => ({ 'transform: ': `${openValue.value ? 'transla
阅读全文
不生效样式： // template <div :style="tSwitchItemCss"></div> // script const tSwitchItemCss = computed(() => ({ 'transform: ': `${openValue.value ? 'transla
阅读全文
摘要：
效果：点击切换按钮，背景色由白色变成黑色，从指定的地方开始过渡 点击按钮： <div ref="themeBtn" @click="changeTheme">点击切换</div> 切换逻辑： // 主题切换按钮 const themeBtn = ref(null); /* 改变颜色 */ const
阅读全文
效果：点击切换按钮，背景色由白色变成黑色，从指定的地方开始过渡 点击按钮： <div ref="themeBtn" @click="changeTheme">点击切换</div> 切换逻辑： // 主题切换按钮 const themeBtn = ref(null); /* 改变颜色 */ const
阅读全文
摘要：
宏就是一些命令组织在一起，作为一个单独命令完成一个特定任务。—— 百度百科 vue3的宏用于指导vue在浏览器的工作，好比人类的DNA，它是独立的一种代码，用于编译成浏览器所能识别的代码，然后vue3在运行时才能使用诸如setup，defineComponent等vue3专用的api。 注意：宏是v
阅读全文
宏就是一些命令组织在一起，作为一个单独命令完成一个特定任务。—— 百度百科 vue3的宏用于指导vue在浏览器的工作，好比人类的DNA，它是独立的一种代码，用于编译成浏览器所能识别的代码，然后vue3在运行时才能使用诸如setup，defineComponent等vue3专用的api。 注意：宏是v
阅读全文
摘要：
要配置路由守卫要使用到vue-router，它是 Vue.js 官方的路由管理器，主要用于帮助开发者构建单页面应用（Single Page Application，简称 SPA）。 步骤一：新建路由文件，文件名随意，建议叫router.ts，规范一点 // router.ts import { cr
阅读全文
要配置路由守卫要使用到vue-router，它是 Vue.js 官方的路由管理器，主要用于帮助开发者构建单页面应用（Single Page Application，简称 SPA）。 步骤一：新建路由文件，文件名随意，建议叫router.ts，规范一点 // router.ts import { cr
阅读全文
摘要：
常见ui库会有个代码预览，这是怎么做到的？就是通过导入一个vue文件的源代码，用pre和code包裹着显示的，比如： <template> <div> <transition name="slide-fade"> <pre v-highlight> <code class="language-js"
阅读全文
常见ui库会有个代码预览，这是怎么做到的？就是通过导入一个vue文件的源代码，用pre和code包裹着显示的，比如： <template> <div> <transition name="slide-fade"> <pre v-highlight> <code class="language-js"
阅读全文
摘要：
我在xx.md文件里引入了多个vue文件，如下： <script setup> import demo1 from "./demo1.vue"; import demo2 from "./demo2.vue"; import preview from "@/components/preview.vu
阅读全文
我在xx.md文件里引入了多个vue文件，如下： <script setup> import demo1 from "./demo1.vue"; import demo2 from "./demo2.vue"; import preview from "@/components/preview.vu
阅读全文
摘要：
1. Transition 和 TransitionGroup 用途：用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。 特点： Transition：只影响单个元素或组件，不会额外渲染DOM元素。 TransitionGroup：渲染一个真实的
阅读全文
1. Transition 和 TransitionGroup 用途：用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。 特点： Transition：只影响单个元素或组件，不会额外渲染DOM元素。 TransitionGroup：渲染一个真实的
阅读全文
浙公网安备 33010602011771号