文章 2023-05-11 来自:开发者社区

Vue3+TypeScript学习笔记(三十五)

定义:Web Components提供了及语言声支持的,对视图层封装的能力,可以让单个组件相关的HTML、CSS、JavaScript模板运行在以html为界限的环境中,不会影响到全局和其他组件。此外标签提供了完整的生命周期钩子函数简单的演示案例<!DOCTYPE html> <html lang="en"> <head> <meta chars...

文章 2023-05-11 来自:开发者社区

Vue3+TypeScript学习笔记(三十四)

35~38暂时跳过,讲的是Electron和webpack构建相关的操作,后面回来学习在浏览器端,可以使用Lighthouse来评估性能,其中的主要指标有:FCP (First Contentful Paint)首次内容绘制的时间,浏览器第一次绘制 DOM 相关的内容,也是用户第一次看到页面内容的时间Speed Index页面各个可见部分的显示平均时间,当我们的页面上存在轮播图或者需要从后端获取....

文章 2023-05-11 来自:开发者社区

Vue3+TypeScript学习笔记(三十三)

首先我们回顾一下在脚本中利用createVNode和render函数创建Vue节点的方法<template></template> <script setup lang="ts"> import { ref, reactive, createVNode, render } from 'vue' // 类型、配置项、内容 const div = create...

文章 2023-05-11 来自:开发者社区

Vue3+TypeScript学习笔记(三十二)

原子化的优缺点:减少css体积,提高复用程度不必操心麻烦的命名增加了记忆成本,新手可能需要经常翻看文档接入unocss:安装:npm i -D unocss配置vite.config.js,配置项有preset(预设)、rules(css规则)、shortcuts(组合样式)等,以下为完整示例import { defineConfig } from 'vite' import vue from ....

Vue3+TypeScript学习笔记(三十二)
文章 2023-05-11 来自:开发者社区

Vue3+TypeScript学习笔记(三十一)

由于性能优化的需要,处在调用栈中的同步任务会先于模板更新执行,因此下面的这段代码输出的还是'我是小满'<template> <div ref="div">{{ message }}</div> <button @click="change">改变值</button> </template> <scri...

文章 2023-04-19 来自:开发者社区

Vue3+TypeScript学习笔记(三十)

Vue3的CSS支持一些神奇的新特性,有:slotted(选择器)插槽样式、:global()全局样式和CSS模块化。接下来将分别举例:slotted()插槽样式使用场景:子组件中定义了插槽,父组件来“填坑”的时候希望将样式设定在子组件中,但此时如果直接.类名Vue会认为我们在修改子组件中的样式,因此不起作用。遇到这种情况可以利用:slotted()将样式穿透到父组件中App.vue<te....

文章 2023-04-19 来自:开发者社区

Vue3+TypeScript学习笔记(二十九)

由于scope的存在,每个HTML标签会被标上唯一的属性,有时我们想修改标签就会变成以下这种情况:element-ui里有一个el-input__wrapper,它默认是白色的,现在我要把它改成红色,于是很自然地想到添加样式直接添加样式/* lang=scss可以去掉 */ &lt;style scoped lang="scss"&gt; // 使用deep进行样式穿透 .el-input__w....

文章 2023-04-19 来自:开发者社区

Vue3+TypeScript学习笔记(二十八)

每一个Vue插件中都有一个install方法,当使用Vue.use(插件名)时Vue将调用插件中的install方法执行对应功能,下面是一个展示Loading状态的Vue插件Loading文件夹Loading.vue<template> <!-- 定义初始状态false --> <div v-if="show" class="default"> ...

文章 2023-04-19 来自:开发者社区

Vue3+TypeScript学习笔记(二十七)

在以前的Vue2中,我们可以通过Vue.prorotype.变量名的方式来挂载全局变量或函数,不过Vue3中并没有这个功能,取而代之的是app.config.global.globalProperties.变量名的书写方式,在main.ts中定义完毕后,所有的组件实例都可以获取到并能够在模板中直接使用定义全局变量main.tsimport { createApp } from 'vue' // ....

文章 2023-04-19 来自:开发者社区

Vue3+TypeScript学习笔记(二十六)

hook是Vue3的新特性,和Vue2的minxin非常像,但相比minxin其不覆盖同名变量,按需引入的方式使其更适合频繁使用,除了Vue原生的hook函数(useAttr()等)外,useVue也提供了一系列强大的hook函数,本节演示如何使用hook函数将图片转为base64编码App.vue<template> <img src="./assets/test1....

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

阿里巴巴终端技术

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

+关注