随笔分类 - Vue.js 3.0
摘要：
<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：渲染一个真实的
阅读全文
摘要：
我在写一个ui组件库，在打包时发现dist文件夹里没有生成我想要的xx.es.js文件，我查看了我的vue项目中的vue.config.js文件，发现build.lib没有指定输出的文件名 解决方案：配置项目中的vue.config.js文件，参考我的👇 vue.config.js import
阅读全文
我在写一个ui组件库，在打包时发现dist文件夹里没有生成我想要的xx.es.js文件，我查看了我的vue项目中的vue.config.js文件，发现build.lib没有指定输出的文件名 解决方案：配置项目中的vue.config.js文件，参考我的👇 vue.config.js import
阅读全文
摘要：
.box ::v-deep(.a-isp) { flex: initial; }
阅读全文
.box ::v-deep(.a-isp) { flex: initial; }
阅读全文
摘要：
报错：Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'xxx' 原因：引入的antd.css文件实际上应该是reset.css文件，是由于ant-design-vue的官网给的代码和实际下的包的文件不
阅读全文
报错：Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'xxx' 原因：引入的antd.css文件实际上应该是reset.css文件，是由于ant-design-vue的官网给的代码和实际下的包的文件不
阅读全文
摘要：
所有组件生命周期函数都通过添加on前缀或完全更名实现
阅读全文
所有组件生命周期函数都通过添加on前缀或完全更名实现
阅读全文
