文章 2024-07-06 来自:开发者社区

vue3 【实战】封装 “心跳“ 组件

需求描述 在控制台每秒打印一个“hello” 代码实现 <script setup> import { onMounted, onBeforeUnmount, ref } from "vue"; const timer = ...

文章 2024-05-10 来自:开发者社区

Vue实战-将通用组件注册为全局组件

假设一个组件在很多个页面都要用到(比如头部组件,几乎每个页面都用到),我们就可以将它抽取为一个自定义组件,然后再将自定义进行全局注册,这样我们在任何组件都可以直接使用这个自定义组件了,写一次就可以使用无数次,很爽。 以我个人网站为例,这个头部组件几乎每个页面都要用到,那么就把它抽取为自定义组件,进行全局注册。如果你不这样做的话,那你每个页面都要重写一遍。 ...

Vue实战-将通用组件注册为全局组件
文章 2023-04-16 来自:开发者社区

Vue实战【封装一个简单的列表组件,实现增删改查】

前言大家好,上一期的Vue实战都阅读了吗?上一期主要是对Vuex的一个基本操作,通过Vuex我们可以实现全局的状态(数据)共享,以便与我们更好的实现一些需求。不知道大家在日常工作当中是否被频繁的列表增删改查困扰,功能很简单但确实是非常繁琐的一项工作;今天这一期呢我会从Vue2父子组件如何传值并结合Element来封装一个简单的列表组件;一次封装,多次复用。table组件封装在你的componen....

Vue实战【封装一个简单的列表组件,实现增删改查】
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面

说明【Vue 开发实战】学习笔记。效果要实现这个代码的显示使用 raw-loader 实现代码输出到页面https://github.com/webpack-contrib/raw-loadernpm install raw-loader --save-dev我们不走 webpack 的配置,使用下面一种方式import chartCode from "!!raw-loader!@/compon....

【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】实战篇 # 33:更加精细化的权限设计(权限组件、权限指令)

说明【Vue 开发实战】学习笔记。效果实现两种方式实现权限组件的控制,比如下面两个地方的按钮控制,如果是user用户,就没有权限控制函数式组件<script> import { check } from '../utils/auth'; export default { functional: true, props: { authority: { ...

【Vue 开发实战】实战篇 # 33:更加精细化的权限设计(权限组件、权限指令)
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】基础篇 # 13:如何优雅地获取跨层级组件实例(拒绝递归)

说明【Vue 开发实战】学习笔记。ref 引用信息递归查找代码繁琐.性能低效callback ref主动通知(setXxxRef)主动获取(getXxxRef)比如E节点更新就通知A组件,A组件进行ref的缓存即可组件A<template> <div class="border"> <h1>A 结点</h1> <butto...

【Vue 开发实战】基础篇 # 13:如何优雅地获取跨层级组件实例(拒绝递归)
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】基础篇 # 10:生命周期的应用场景和函数式组件

说明【Vue 开发实战】学习笔记。生命周期创建阶段初始化事件和生命周期数据观测、属性、侦听器配置等模板编译到 render异步请求、操作DOM、定时器等更新阶段万万不可更改依赖数据,会造成死循环销毁阶段移除已经添加的事件监听器,计时器等<template> <div> {{ log("render") }} {{ now }} <butt...

【Vue 开发实战】基础篇 # 10:生命周期的应用场景和函数式组件
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】基础篇 # 8:如何触发组件的更新

说明【Vue 开发实战】学习笔记。数据驱动数据来源(单向的)状态 data VS 属性 props状态是组件自身的数据属性是来自父组件的数据状态的改变未必会触发更新属性的改变未必会触发更新例子:index.vue 代码<template> <div id="app"> <p> <button @click=...

【Vue 开发实战】基础篇 # 8:如何触发组件的更新
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】基础篇 # 4:Vue组件的核心概念:插槽

说明【Vue 开发实战】学习笔记。插槽Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。匿名插槽<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

【Vue 开发实战】基础篇 # 4:Vue组件的核心概念:插槽
文章 2023-02-24 来自:开发者社区

【Vue 开发实战】基础篇 # 3:Vue组件的核心概念:事件

说明【Vue 开发实战】学习笔记。事件vue 提供了一个简单的方式进行绑定事件,就是使用 @xxx 就可以进行事件绑定,这里以 click 事件为例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp...

【Vue 开发实战】基础篇 # 3:Vue组件的核心概念:事件

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注