【愚公系列】《循序渐进Vue.js 3.x前端开发实践》030-自定义组件的插槽Mixin
使用了 Mixin）🦋4.2 组件 `my-com1`, `my-com2`, `my-com3`（没有使用 Mixin） 🔎5.组件注册和挂载🔎6.代码逻辑总结🔎7.最终输出🔎8.总结 🚀前言 在 Vue.js 的组件化开发中，插槽（Slots）是一种强大的特性，使得组件的内容更加灵活和可定制。通过插槽，我们可以在组件中插入动态内容，实现更高的重用性和可配置性。然而，随着项目复杂度的提升，如何高效地管...
063：vue工具 --- 整数转化为罗马数字
第063个 专栏目标 在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。 本文章目录 专栏目标应用场景示例效果示例源代码（共107行） 应用场景 vue项目中，如何做将整数转化为罗马数字呢，下面的示例就是这样的一个小工具，具体的看源代码。 罗马数字是基于以下符号的组合： I: 1 V: 5 X: 10 L: 50 C: 100 D: 500 M...
青少年编程与数学 02-006 前端开发框架VUE 12课题、表单绑定
青少年编程与数学 02-006 前端开发框架VUE 12课题、表单绑定 一、表单绑定基本用法修饰符多行文本选择类元素多选表单数据绑定的注意事项 二、应用示例 一、表单绑定 在 Vue 中，表单输入数据绑定通常是指使用 v-model 指令将表单输入元素与应用的数据状态进行双向绑定。这意味着当用户在输入框中输入数据时，Vue 实例的数据会相应更新，反之亦然，如果数据变化了，输入框中显示的内容也会更新。 ...
青少年编程与数学 02-006 前端开发框架VUE 13课题、事件处理
青少年编程与数学 02-006 前端开发框架VUE 13课题、事件处理 一、事件处理1. 基本事件处理2. 事件修饰符3. 子组件事件传递4. 传递事件给子组件5. 动态绑定事件处理函数 二、事件修饰符三、阻止默认行为1. 使用`.prevent`修饰符2. 使用JavaScript的`event.preventDefault()`3. 使用HTML的`onsubmit`属性总结 四、向上更新数据1....
青少年编程与数学 02-006 前端开发框架VUE 14课题、生命周期
青少年编程与数学 02-006 前端开发框架VUE 14课题、生命周期 一、生命周期二、生命周期钩子三、生命周期图示四、应用示例步骤 1：创建Vite项目步骤 2：安装Vue 3步骤 3：创建生命周期组件步骤 4：在App.vue中使用LifecycleComponent步骤 5：运行项目项目说明 一、生命周期 Vue组件的生命周期指的是组件从创建到销毁的整个过程，Vue提供了一系列的生命周期钩子，允...
青少年编程与数学 02-006 前端开发框架VUE 05课题、使用模板
青少年编程与数学 02-006 前端开发框架VUE 05课题、使用模板 一、模板二、Vue 模板的特点三、模板形式四、横向比较Vue 模板 vs Angular 模板Vue 模板 vs React JSXVue 模板 vs Svelte 模板 五、Vue 模板的基本语法六、应用示例 一、模板 Vue 模板是 Vue.js 框架中一个核心的概念，它允许开发者使用声明式的 HTML 代码来描述用户界面。V...
vue视频录制 限制大小，限制时长
<template> <div style="height: 100vh;background: #000;"> <video ref="video" autoplay muted playsinline></video> <div class="video_btn"> <van-button round @click="start" type="info">{{ isRecording ? `录制倒...
用 vue3 实现新年快乐
提前祝福大家新年快乐，今天用一个新年快乐的教程来结束这一年。 看下效果 在这个案例中，我们使用了 vue3 ，有一个浮动的新年快乐的字体，然后有一堆从下到上的小粒子，在文字背后有一个模拟烟花绽放的效果。 环境搭建 我们使用 vite 来搭建一个 vue3 的项目，并且安装 three 的依赖。 通过下面的命令来创建一个 vite 项目 npm create vite 根据提示选择 vue 3 项目，然...
Vue 3 中父子组件的交互与弹框控制：v-model 和事件传递的实践
目录 前言1. Demo2. 基本知识 前言 原先的父子组件传递已经说过很多知识，推荐阅读 详细分析Vue3中的props用法（父传子）详细分析Vue3中的defineExpose（附Demo）详细分析Vue3中的emit用法（子传父） 以下为实战中抽离的Demo，主要讲解一些基本事项！ 1. Demo 先以实战中抽离的Demo为示例进行讲解： 父组件：ParentComponent.vue <tem...
vue3入门教程：reactive函数
基本用法 引入 reactive 首先，你需要从 vue 包中引入 reactive 函数： import { reactive } from 'vue'; 创建一个响应式对象 使用 reactive 函数来创建一个响应式对象： const state = reactive({ count: 0, name: 'Vue 3'}); 在这个例子中，state 是一个响应式对象，它包含了 count 和...