摘要：
一、使用原生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 阅读全文