08 2022 档案
摘要：问号(?)的强大之处 点击打开视频讲解更加详细 一、问号点（?.） obj: { name: "末晨曦吖", }, console.log(this.obj.age, "年龄"); //undefined console.log(this.obj.hobby, "爱好"); //undefined
阅读全文
摘要：Vue + Elementui 实现登录页 手机验证码、倒计时等功能 点击打开视频讲解 更加详细 <template> <div id="app"> <div class="left">用代码改变世界</div> <el-form class="content" ref="refForm" :rul
阅读全文
摘要：进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript
阅读全文
摘要：VsCode六种插件，前端效率神器！！！ 点击打开视频讲解更加详细 live serve（实时刷新插件） 操作图示： indent-rainbow（彩色缩进插件） 操作图示： bracket pair colorizer（着色括号匹配） 操作图示： Format On Save（格式化代码） 操作图
阅读全文
摘要：强制更新和创建低开销的静态组件 点击打开视频讲解更加详细 强制更新 如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。 你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。 然而，如果你已经做到了上述的
阅读全文
摘要：Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。 this.$router：全局的 router 实例。通过 vue 根实例中
阅读全文
摘要：如何去掉vue的url地址中的#号?及其原理？ 点击打开视频讲解更加详细 如何去掉vue的url地址中的#号? import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) // 1. 定义一些路由 //
阅读全文
摘要：Vue刷新页面VueX数据清空了，怎么重新获取？ 点击打开视频讲解更详细 在vue中刷新页面后，vuex中的数据就没有了，这时我们要想使用就要重新获取数据了， 怎么在刷新后重新获取数据呢？？？ 这时我们就可以写个公共的方法，在公共页面（可以是根页面）判断store仓库中数据是否为空，若为空的话，就可
阅读全文
摘要：JS实现数组去重常用的六种方法 点击打开视频讲解更详细 双重for循环去重 let arr = [1,2,3,4,3,2,3,5]; let unique = (arr)=>{ //第一层for循环 数组的前一项 for(var i=0; i<arr.length; i++){ //第二层for循环
阅读全文
摘要：CSS 中几种最常用的水平垂直居中的方法 点击打开视频讲解更加详细 一、使用 margin:auto 当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。 此时就需要设置元素的 position 为 absolute，父级元素的 position
阅读全文
摘要：处理边界情况之X-template 点击打开视频讲解更加详细 另一个定义模板的方式是在一个<script>元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如： <script type="text/x-template" id="hello-worl
阅读全文
摘要：@(目录) 点击打开视频讲解面试技巧+面试全过程 一、HTML 1、语义话的目的是什么？ 语义化的主要目的可以概括为用正确的标签做正确的事 HTMl语义化可以让页面的内容结构化，以便于浏览器解析和搜索引擎解析， 并且提高了代码的可读性便于代码维护， 2、HTML5新增元素 Canvas绘图以及SVG
阅读全文
摘要：内联模板 点击打开视频讲解更加详细 当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。 <my-component inline-template> <div> <
阅读全文
摘要：组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树，像访达或资源管理器那样的。你可能有一个 <tree-folder> 组件，模板是这样的： <p> <span>{{ folder.name }}</span> <tree-folder-contents :children="
阅读全文
摘要：CSS transition 属性详解 点击打开视频讲解更详细 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。
阅读全文
摘要：什么是HTML 点击打开视频讲解更加详细 Hyper Text Markup Language（超文本标记语言） 标签控制排版 体积小，方便传输 编写HTLML 推荐使用：VS Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
阅读全文
摘要：循环打印红绿灯 点击打开视频讲解更加详细 红灯3秒后变成绿灯 绿灯5秒后变成黄灯 黄灯2秒后变成红灯 案例： <template> <div id="app"> <div>循环打印红绿灯</div> <div>红灯3秒后变成绿灯</div> <div>绿灯5秒后变成黄灯</div> <div>黄灯2
阅读全文
摘要：JSON.stringify()妙用 点击打开视频讲解更加详细 语法：JSON.stringify(value, replacer , space) value：将要序列化成 一个JSON 字符串的值。 replacer（可选）：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过
阅读全文
摘要：递归组件 点击打开视频讲解更加详细 组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事： name: 'unique-name-of-my-component' 当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name
阅读全文
摘要：强制更新($forceUpdate) 点击打开视频讲解更加详细 在vue中，如果data中有基本数据类型变量:age，修改他，页面会自动更新。 但如果data中的变量为数组或对象（引用数据类型），我们直接去给某个对象或数组添加属性，页面是识别不到的，不会同步更新； <template> <div i
阅读全文
摘要：程序化的事件侦听器 点击打开视频讲解更详细 现在，你已经知道了 $emit 的用法，它可以被 v-on 侦听，但是 Vue 实例同时在其事件接口中提供了其它的方法。我们可以： 通过 $on(eventName, eventHandler) 侦听一个事件 通过 $once(eventName, eve
阅读全文
摘要：provide和inject依赖注入 点击打开视频讲解更详细 在此之前，在我们描述访问父级组件实例的时候，展示过一个类似这样的例子： <google-map> <google-map-region v-bind:shape="cityBoundaries"> <google-map-markers
阅读全文
摘要：一、为什么会出现跨域问题 点击打开视频讲解更详细 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同
阅读全文
摘要：使用ref访问子组件实例或子元素 点击打开视频讲解更加详细 尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。 <template> <div id="app"
阅读全文
摘要：使用$parent访问父级组件实例 点击打开视频讲解更详细 和 $root 类似，$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。 注意：在绝大多数情况下，触达父级组件会使得你的应
阅读全文
摘要：处理边界情况之使用$root访问根实例 点击打开视频教程 在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。 例如，在这个根实例中： src\main.js import Vue from 'vue' import App from './App.vu
阅读全文
摘要：Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据
阅读全文
摘要：【CSS】实现简单易上手的'手风琴效果' 点击打开视频讲解 <template> <div id="app"> <div class="shell"> <div class="box"> <img src="./assets/img1.jpg" alt=""> <span>图片1</span> </
阅读全文
摘要：@vue/cli 中用axios请求本地json报 404 点击打开视频讲解 问题： @vue/cli 中用axios请求本地json，开始把json放到了static下面，各种报404 解决办法： json文件需要存在public文件夹下，cli3之后public才是存放静态资源的地方,内置服务器
阅读全文
摘要：八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中，我们总免不了要写各种各样的css动画，给某个部分添加动画效果，如果觉得自己写的动画效果单一乏味，不妨试试这8个CSS动画库，值得收藏使用。 一、hover.css 开箱即用的鼠标悬停动画，支持的动画类型有： 2D Trans
阅读全文
摘要：点击打开视频讲解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
阅读全文
摘要：盒模型 点击打开视频教程 标准盒模型、怪异盒模型（IE盒模型） 什么是盒模型？ 盒模型的作用：规定了网页元素如何显示以及元素间的相互关系 盒模型的概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。 css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、
阅读全文
摘要：Vue.use()的作用及原理 点击打开视频讲解 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来 但是有的组件在引入之后又做了Vue.use()操作 有的组件引入进来又进行了Vue.prototype.$axios = axios 那么它们之间有什么联系呢？ 例如：Vue.us
阅读全文
摘要：纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <div class="test-border"></div> </div> </template> <script> export default { name: '
阅读全文
