前端
关注
分享
扫一扫
文章平均质量分 73
追风人聊Java
学习是一辈子的事
展开
-
VUE3 之 插件的使用 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 插件3. 综述4. 个人公众号老话说的好：起点低不要紧，只要坚持不断的去努力就能取得成功。言归正传，今天我们来聊聊 VUE 中 插件的使用。2.1 插件的声明通常把通用的部分抽出来，单独写在插件中，在插件中可以增加变量、增加自定义指令、增加 mixin、增加子组件等。2.2 组件与插件绑定在组件与插件绑定时，可以传递参数，在插件中可以通过上面例子的 options 得到这个参数。2.3 在组件中使用插件 插件中声明的 变量、自定义指令、mixin、子组件等，都可以在组件原创 2022-06-26 16:32:49 · 2210 阅读 · 1 评论 -
VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. render 函数3. 综述4. 个人公众号老话说的好：不用想的太多、太远，做好当天的事，知道明天要做什么就可以了。言归正传，今天我们来聊聊 VUE 中 render 函数的使用。2.1 一个简单的例子 这个例子中，我们用到了之前学的 子组件 和 插槽，实现了对主组件中的文字加 h 标签的功能。2.2 依据数据，改变 h 标签这个例子中，我们希望依据数据 myLevel 的值，改变主组件中文字的 h 标签，1 对应 h1，2 对应 h2。2.3 更多的 h 标签我们希望原创 2022-06-01 20:37:46 · 17804 阅读 · 2 评论 -
VUE3 之 Teleport - 这个系列的教程通俗易懂，适合自学
目录1. 概述2.Teleport3. 综述4. 个人公众号1. 概述老话说的好：宰相肚里能撑船，但凡成功的人，都有一种博大的胸怀。言归正传，今天我们来聊聊 VUE 中 Teleport 的使用。2.Teleport2.1 遮罩效果的实现 <style> .area { position: absolute; left: 50%; top: 50...原创 2022-05-08 17:30:17 · 1101 阅读 · 1 评论 -
VUE3 之 自定义指令的实现 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 自定义指令3. 综述4. 个人公众号1. 概述老话说的好：能屈能伸的人生，才是完满而丰富的人生。言归正传，今天我们来聊聊 VUE 中自定义指令的实现。2. 自定义指令2.1 文本框聚焦的实现 <body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ mo原创 2022-05-04 21:45:35 · 983 阅读 · 0 评论 -
一文解决浏览器跨域问题
目录1. 概述2. 跨域问题3. 综述4. 个人公众号1. 概述老话说的好：大处着眼，不贪一时之利。太贪心，只会失去更多，知足才能常乐。言归正传，今天我们来聊聊 如何解决浏览器跨域的问题。2. 跨域问题2.1 什么是跨域跨域，简单说就是访问的页面域名是 www.a.com，而在此页面中 Ajax 请求接口，请求的是 www.b.com 的接口，出于安全考虑，浏览器默认不允许这样做，便会报错，提示跨域。至于为什么浏览器默认不允许跨域，允许跨域有什么安原创 2022-04-23 20:50:19 · 2051 阅读 · 0 评论 -
VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. Mixin 的使用3. 综述4. 个人公众号1. 概述老话说的好：心态决定命运，好心态才能有好的命运。言归正传，今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略。2. Mixin 的使用2.1 全局 Mixin之前咱们介绍的 Mixin 用法，是局部 Mixin，需要在组件和子组件中使用mixins:[myMixin] 去引入 Mixin，下面我们介绍 全局 Mixin。<body> &..原创 2022-04-05 22:00:42 · 3410 阅读 · 2 评论 -
VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. Mixin 的使用3. 综述4. 个人公众号1. 概述老话说的好：舍得舍得，先舍才能后得。言归正传，今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用。2. Mixin 的使用2.1 不使用 Mixin 的写法<body> <div id="myDiv"></div></body><script> const app = Vue.createApp原创 2022-04-04 22:05:07 · 2410 阅读 · 0 评论 -
VUE3 之 状态动画 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 状态动画3. 综述4. 个人公众号1. 概述老话说的好：不用羡慕别人，每个人都有属于自己的人生道路，重要的是在前进道路上遇见阻碍时，如何去积极的面对并解决。言归正传，今天我们来聊聊 VUE 的状态动画。2. 状态动画2.1 数字加10的例子 <body> <div id="myDiv"></div></body><script> const app = V原创 2022-03-20 21:40:24 · 1875 阅读 · 0 评论 -
VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 列表动画3. 综述4. 个人公众号1. 概述老话说的好：可以为别人解决痛点的产品就是好产品。言归正传，今天我们来聊聊 VUE 的列表动画。2. 列表动画2.1 列表中增加和删除元素<style> .my-item { display: inline-block; margin-right: 15px; }</style>&.原创 2022-03-19 21:47:29 · 1509 阅读 · 0 评论 -
VUE3 之 多个组件之间的过渡 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 多个组件之间的过渡3. 综述4. 个人公众号1. 概述老话说的好：多换位思考，多站在他人的角度考虑问题，多考虑他人的感受，这样才能让我们赢得更多的朋友。言归正传，之前我们聊了多个元素之间的过渡，今天我们聊聊多个组件之间的过渡。2. 多个组件之间的过渡2.1 局部组件之间过渡的实现 <style> /* 入场起始样式 */ .v-enter-from { opacit原创 2022-03-13 20:01:11 · 2008 阅读 · 2 评论 -
VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2.多个元素之间的过渡3. 综述4. 个人公众号1. 概述老话说的好：过去不等于未来，过去成功了不代表将来也会成功，过去失败了也不代表将来也会失败。言归正传，今天我们聊聊多个元素之间的过渡。2.多个元素之间的过渡2.1 两个元素交替显示<body> <div id="myDiv"></div></body><script> const app = Vue.c..原创 2022-03-12 21:42:13 · 1675 阅读 · 0 评论 -
VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合自学
目录1. 概述2.使用标签实现动画与过渡的效果3. 综述4. 个人公众号1. 概述毛毛虫效应：有这样一个实验，将许多毛毛虫放在一个花盆边缘，使它们首尾相接，围成一个圈。然后在离花盆很近的地方撒了一些毛毛虫的食物。此时，毛毛虫并不会向食物的方向爬去，而是在花盆边缘，一个跟着一个的转圈，直到7天后，因为饥饿和精疲力尽相继死去。这是毛毛虫的一种特性吧，它们喜欢跟随前者的路线行走，这也是固化思维的一种表现。因此解放思维，有创新精神是很重要的。言归正传，今天我们继.原创 2022-03-06 22:22:43 · 1388 阅读 · 0 评论 -
VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2.使用标签实现动画与过渡效果3. 综述4. 个人公众号1. 概述巴纳姆效应告诉我们：人们更容易相信笼统的、常见的人格描述，并觉得特别适合自己，认为该描述真实地反映了自己的人格面貌。这也是所有算命先生的小把戏，算命先生通常把话说的很笼统，很通用，基本是适合所有人的，再加上一些察言观色、随机应变的技巧，不明状况的人就会盲目的相信，觉得很“神”。我们要学会正确的面对自己，增强自己的判断能力，才能做到真正的了解自己。言归正传，今天我们来聊聊如何使用标签原创 2022-03-05 12:51:23 · 1522 阅读 · 0 评论 -
VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2.动画与过渡3. 综述4. 个人公众号1. 概述光环效应告诉我们：当一个人在某一方面取得了巨大的成功，人们就会给他贴上正面的标签，这个人从此就被“优秀”的光环所笼罩，他做的一切，人们都认为是正确的。例如：越是名气大的明星代言的商品，买的人就越多。反之亦然，当一个人在某一方面失败了，往往就会被贴上负面的标签，从此被“失败”的“光环”所笼罩，他做的一切，周围人都认为是错误的。例如：一个人第一次做生意就失败了，则这个人再做什么决策，他的朋友都认为是错误的原创 2022-02-18 18:54:38 · 726 阅读 · 0 评论 -
VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. ref、provide、inject3. 综述4. 个人公众号1. 概述首因效应告诉我们：在日常交往中，第一印象是非常重要的，好的第一印象能让我们在与人相处时事半功倍。但也从另一面告诉我们，不能仅凭第一印象去判断一个人，有时虚假的第一印象，也有可能蒙蔽我们的双眼，影响我们的判断，正所谓“路遥知马力，日久见人心”。言归正传，今天我们来聊聊 VUE 中 ref、provide、inject 的使用。2. ref、provide、inject原创 2022-02-13 18:04:09 · 1760 阅读 · 0 评论 -
VUE3 之 动态组件 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 动态组件3. 综述4. 个人公众号1. 概述暗示效应告诉我们：巧妙的暗示会在不知不觉中剥夺我们的判断力，对我们的思维形成一定的影响，造成我们行为的些许改变或者偏差。例如你的朋友说你脸色不太好，是不是病了，此时，你可能就会感觉浑身不舒服、头重脚轻，想赶紧去看医生。而如果你的朋友对你说你脸色不太好，应该是没睡好，属于正常现象，一会中午吃点好的，再睡个午觉就没事了，你可能就会感觉只是小事情，不会去在意。积极的暗示，是有利于身心健康的，因此我们要时刻保持正原创 2022-02-11 21:35:59 · 2526 阅读 · 1 评论 -
VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合自学
目录1. 概述2. 作用域插槽3. 综述4. 个人公众号1. 概述破窗效应告诉我们：当一个建筑物窗户的玻璃完好无损时，很少有人想去破坏它，当有一个人破坏了一块窗户的玻璃，其他窗户的玻璃也很快会被人破坏。同理，一个很干净的地方，人们不好意思去丢垃圾，但是一旦地上出现了一点垃圾，人们就会毫不犹豫地丢垃圾，不会觉得惭愧。因此，我们不要忽略一些小的问题，小的问题不去修复、解决，很快就会蔓延成大问题，正所谓虱子多了不咬，债多了不愁。言归正传，今天我们来聊聊作用域插槽的使用。原创 2022-02-07 21:07:19 · 3214 阅读 · 1 评论 -
VUE3 之 插槽的使用
目录1. 概述2. 插槽的使用3. 综述4. 个人公众号1. 概述非理性定律告诉我们：人们总是习惯于以情感去判断眼前的事物，非理性的去做决定。对于长远的利益，人们更愿意去选择短期的利益。因此在做决定前要让自己冷静，理性的分析，让自己看的更远。言归正传，今天我们来聊一个新的概念 —— 插槽。2. 插槽的使用2.1 一个简单的例子我们先来看一个简单的例子<body> <div id="myDiv"></div原创 2022-01-28 21:47:26 · 3765 阅读 · 0 评论 -
VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用
目录1. 概述2. 多个 v-model 绑定3. v-mode 修饰符4. 综述5. 个人公众号1. 概述洛克定律告诉我们：当我们的目标很远大，远到我们都看不到终点时，放弃几率就会很大，就像跑马拉松比赛，由于时间长、距离长，很多选手都会选择在中途放弃。其实有个好办法，就是拆分，把大目标拆分成很多的小目标，这些小目标都是能够看到终点的，让自己有一种努力一下就能完成目标的感觉，当把所有的小目标完成后，大目标自然也就完成了。言归正传，上一节我们聊了子组件修改父组件数.原创 2022-01-26 17:18:30 · 10127 阅读 · 0 评论 -
VUE3 之 组件间事件通信
目录1. 概述2. 组件间事件通信3. 综述4. 个人公众号1. 概述相关定律告诉我们：这个世界上的任何事物之间都会存在一定联系，“城门失火，殃及池鱼”就是一个很好的例子。因此如果我们能够尽早发现这些看不见的联系，就能很好的解决更多遇见的难题。言归正传，之前我们聊过如何在子组件中去修改主组件传递的参数的值，当时是在子组件中重新声明一个新数据，初始值为父组件传参的值，然后对子组件的数据进行计算。今天我们使用事件的方式来实现对父组件的传参进行修改。2. 组件间事件通信原创 2022-01-24 20:48:12 · 1454 阅读 · 0 评论 -
VUE3 之 Non-Props 属性
目录1. 概述2.Non-Props 属性3. 综述4. 个人公众号1. 概述墨菲定律告诉我们：人总是容易犯错误的，无论科技发展到什么程度，无论是什么身份的人，错误总是会在不经意间发生。因此我们最好在做重要的事情时，尽量去预估所有可能发生的错误，并思考错误发生后的补救方案，再准备一个或多个备选方案。这样才能做到有备无患，防患于未来。言归正传，之前我们聊了组件的传参，今天我们来聊一下Non-Props 属性，Non-Props 这个词，不了解的同学一定觉得很高深，其实很...原创 2022-01-22 21:41:09 · 1216 阅读 · 1 评论 -
VUE3 之 组件传参
目录1. 概述2. 组件传参3. 综述4. 个人公众号1. 概述韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的 组件传参。2. 组件传参2.1 初识组件传参<body> <div id="myDiv">原创 2022-01-21 09:18:55 · 5209 阅读 · 0 评论 -
VUE3 之 全局组件与局部组件
目录1. 概述2. 全局组件3. 局部组件4. 综述5. 个人公众号1. 概述老话说的好：忍耐是一种策略，同时也是一种性格磨炼。言归正传，今天我们来聊聊 VUE 的全局组件与局部组件。2. 全局组件2.1 不使用组件的写法<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({原创 2022-01-15 16:59:58 · 1956 阅读 · 0 评论 -
VUE3 之 表单元素
目录1. 概述2. 表单元素3. 综述4. 个人公众号1. 概述老话说的好：行动起来，原地观望是没有用的。言归正传，今天我们来聊聊 VUE3 的 表单元素。2. 表单元素2.1 文本框与数据绑定<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ // 创建一个vue应用实例原创 2022-01-11 20:09:21 · 1373 阅读 · 0 评论 -
VUE3 之 键盘事件
目录1. 概述2. 键盘事件3. 综述4. 个人公众号1. 概述老话说的好：宁愿自己吃亏，也不让他人吃亏。言归正传，今天我们来聊聊 VUE3 的 键盘事件。2. 键盘事件2.1 敲击任意键触发事件<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ // 创建一个vue应用实例原创 2022-01-06 23:07:57 · 10662 阅读 · 3 评论 -
VUE3 之 click 事件
目录1. 概述2. click 事件3. 综述4. 个人公众号1. 概述老话说的好：努力帮别人解决难题，你的难题也就不难解决了。言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。2. click 事件2.1 实现数字递减<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({原创 2022-01-03 10:34:01 · 15032 阅读 · 0 评论 -
VUE3 之 循环渲染
目录1. 概述2. 循环渲染3. 综述4. 个人公众号1. 概述老话说的好：单打独斗是不行的，要懂得合作。言归正传，今天我们来聊聊 VUE3 的 循环渲染。2. 循环渲染2.1 循环渲染数组<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ // 创建一个vue应用实例原创 2021-12-31 21:05:35 · 2769 阅读 · 0 评论 -
VUE3 之 条件渲染
目录1. 概述2. 条件渲染3. 综述4. 个人公众号1. 概述老话说的好：要锻炼逆向思维，人取我弃，人弃我取。言归正传，今天我们来聊聊 VUE3 的条件渲染。2. 条件渲染2.1 v-if<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ // 创建一个vue应用实例原创 2021-12-30 18:39:20 · 1279 阅读 · 0 评论 -
VUE3 之 样式绑定
目录1. 概述2. 样式绑定3. 综述4. 个人公众号1. 概述老话说的好：脚踏实地，从小事做起。言归正传，今天我们来聊聊 VUE3 的样式绑定。2. 样式绑定2.1 样式例子 <style> /* 颜色 */ .color-red { color: red; } /* 字体 */ .font-size-25 {原创 2021-12-23 22:38:42 · 1122 阅读 · 0 评论 -
VUE3 之 计算属性与侦听器
目录1. 概述2. 计算属性3. 侦听器4. 综述5. 个人公众号1. 概述老话说的好：只要你有心努力，任何时候都不晚。言归正传，今天我们来聊聊VUE3 的 计算属性与侦听器。闲话不多说，直接上代码。2. 计算属性2.1 概述如果页面显示的内容，需要经过数据的计算获得，通常有三种方式：插值表达式中计算、方法中计算和计算属性中计算。差值表达式中计算、方法中计算都有个缺点，当页面重新渲染时，就会重新计算，浪费系统资源。在计算属性中计算时，只有当..原创 2021-12-19 09:56:53 · 419 阅读 · 0 评论 -
VUE3 之 template 语法
目录1. 概述2.template 语法3. 综述4. 个人公众号1. 概述老话说的好：干一行，爱一行，踏实工作才是真正快乐的源泉。言归正传，今天继续聊 VUE3 的话题，今天聊聊template 语法。闲话不多说，直接上代码。2.template 语法2.1 与数据绑定<script src="../vue.global.js"></script></head><body> <di...原创 2021-12-15 18:15:47 · 6998 阅读 · 0 评论 -
VUE3 之 生命周期函数
目录1. 概述2. VUE3 生命周期函数介绍3. 代码例子4. 综述5. 个人公众号1. 概述老话说的好：天生我材必有用，千金散尽还复来。言归正传，今天我们来聊一下 VUE 的生命周期函数。所谓生命周期函数，就是在某一条件下被自动触发的函数。2. VUE3 生命周期函数介绍2.1beforeCreate在 VUE 实例生成之前会自动执行的函数2.2created在 VUE 实例生成之后会自动执行的函数2.3 beforeMou..原创 2021-12-11 20:03:44 · 2983 阅读 · 2 评论 -
VUE3 入门
目录1. 概述2. 安装开发工具Visual Studio Code3. VUE3 入门4. 综述5. 个人公众号1. 概述老话说的好：没有别人混的好，是因为自己能力欠佳，因此越是混的差，越要努力提升自己。言归正传，现在 jquery 用的越来越少，大部分公司都使用 VUE 技术，今天我们也来聊聊 VUE3。2. 安装开发工具Visual Studio Code前端页面通常使用 Visual Studio Code 工具进行开发。可以到官网进行下载并安..原创 2021-12-08 23:41:29 · 843 阅读 · 0 评论