09 2022 档案
摘要：一、使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position
阅读全文
摘要：Vue2动态添加路由 点击打开视频讲解更加详细 场景： 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃：使用 router.addRoute() 代替。 vue-router4版本前也可用 函数签名： router.addRou
阅读全文
摘要：@(目录标题) 为什么需要响应式网页 点击打开视频讲解更加详细 随着网页数量和质量的上升，以及设备种类和数量的增加，不同设备查看不同网页导致的缩放问题、排版问题等一系列前端问题越发明显。 想要解决他们，我们可以为不同类型的设备编写不同样式的代码，做不同版本的测试。 然而这样做有两个弊端： 工作量过大
阅读全文
摘要：一、this指向 点击打开视频讲解更加详细 this随处可见，一般谁调用，this就指向谁。this在不同环境下，不同作用下，表现的也不同。 以下几种情况，this都是指向window 1、全局作用下，this指向的是window console.log(window); console.log(t
阅读全文
摘要：前端像素鸟小游戏 点击打开视频讲解更加详细 一、案例效果 二、实现思路 创建游戏背景板和小鸟，并分别设置相对定位与绝对定位； 初始化背景图的位置； 初始化小鸟的位置； 设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动； 使小鸟飞行，其实就是背景图在 X 轴方向的位置不断减小，实现
阅读全文
摘要：一、案例效果 点击打开视频讲解更加详细 二、实现思路 创建游戏背景板； 创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove 创建子弹，让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动，top 小于 0 也就是子弹走出游戏面板时删除自身； 创建敌机，让敌机周
阅读全文
摘要：JS监听浏览器缩放比例 点击打开视频讲解更加详细 应用场景： 可在切换浏览器不同百分比时显示不同样式 可在切换浏览器不同百分比时控制不同的dom操作 。。。。。。。 完整案例： <template> <div id="home"> <h2 :class="text">浏览器缩放比例：{{ ratio
阅读全文
摘要：JS使用parseInt()和正则截取字符串中数字 点击打开视频讲解更加详细 parseInt() 函数 定义和用法 parseInt() 函数可解析一个字符串，并返回一个整数。 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数 当忽略
阅读全文
摘要：多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡，对于原生标签可以使用 v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： <transition> <table v-if="items.length > 0"> <!-- ... --> </ta
阅读全文
摘要：初始渲染的过渡 点击打开视频讲解更加详细 可以通过 appear attribute 设置节点在初始渲染的过渡 <transition appear> <!-- ... --> </transition> 这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。 <transition app
阅读全文
摘要：JS第七种数据类型Symbol详解 点击打开视频讲解更加详细 一、什么是Symbol？ Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值。它是JavaScript中的第 七种数据类型，与undefined、null、Number（数值）、String（字符串）、Boolea
阅读全文
摘要：JS实现数组扁平化处理 点击打开视频讲解更加详细 期望结果： 将数组扁平化并去重 最终得到一个升序且不重复的数组 步骤： 1、数组扁平化 2、去重 3、排序 <template> <div id="home"> JS实现数组扁平化处理，妙不可言啊！ <!-- 期望结果： 将数组扁平化并去重 最终得到
阅读全文
摘要：JavaScript 钩子 点击打开视频讲解更加详细 可以在 attribute 中声明 JavaScript 钩子 完整案例： <template> <div id="app"> <div id="example-3"> <button @click="show = !show"> Toggle
阅读全文
摘要：js实现将excel表格copy到页面 点击打开视频讲解更加详细 其实最核心的技术，还是copy的是我们粘贴板上的数据 就像平常怎么粘贴复制其他的数据一样，只是我们在excel粘贴的是一个表格数据 这时我们首先也时获取我们粘贴板上的数据，如何对粘贴板上的数据进行处理，处理成 我们想要的表格形式。 完
阅读全文
摘要：显性的过渡持续时间 点击打开视频讲解更加详细 在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些
阅读全文
摘要：同时使用过渡和动画 点击打开视频讲解更加详细 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。 但是，在一些场景中，你需要给同一个元
阅读全文
摘要：【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！ 点击打开视频讲解更加详细 <template> <div class="content"> <img src="../assets/live.gif" alt="" /> <section class="cloud-bed"> <div
阅读全文
摘要：Array.apply(null, { length: 1000 }) 点击打开视频讲解更加详细 在阅读VueJS教程时有这么段demo code： render: function (createElement) { return createElement('div', Array.apply(
阅读全文
摘要：Vue路由传参的两种方式query和params 点击打开视频讲解更加详细 一、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用nam
阅读全文
摘要：Vue路由跳转的四种方式用法及区别 点击打开视频讲解更加详细 一、router-link <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-
阅读全文
摘要：自定义过渡的类名 点击打开视频讲解更加详细 我们可以通过以下 attribute 来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-clas
阅读全文
摘要：CSS动画 点击打开视频讲解更加详细 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 完整案例： <template> <div id="app"> <div id="example-2">
阅读全文
摘要：CSS过渡 点击打开视频讲解更加详细 常用的过渡都是使用 CSS 过渡。 完整例子： <template> <div id="app"> <div id="example-1"> <button @click="show = !show"> Toggle render </button> <tran
阅读全文
