m0_50125215的博客

<script> // ### every 每一项 // ```js // const 布尔值 = arr.every(item => 条件); // ``` // MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every // 注意点：

是预留的内容的占位符三种类型：匿名插槽：没有指定name属性，默认是default具名插槽：指定name属性，另一边使用的时候用#name值作用域插槽：用来绑定props数据定义插槽：<slot name='插槽名' :属性名(这个名称与后期获取数据时的属性名称对应)='数据'>使用插槽：<组件名> <template #插槽名='数据形参(这里是传过来的数据)'> 自定义渲染，对象可以解构 </temp..

定义：多个组件使用同一个挂载点，并动态切换使用：，当控制 componentName 改变时就可以动态切换选择组件

现在权限相关管理系统用的框架都是element提供的vue-element-admin模板框架比较常见。权限控制常见分为三大块菜单权限控制按钮权限控制请求url权限控制权限管理在后端中主要体现在对接口访问权限的控制，在前端中主要体现在对菜单访问权限的控制。按钮权限控制比较容易，主要采取的方式是从后端返回按钮的权限标识，然后在前端进行显隐操作 v-if / disabled。url权限控制，主要是后端代码来控制，前端只需要规范好格式即可。剩下的菜单权限控制，是相对复杂

全局状态管理库。可通过它来进行全局数据流的管理。state: 存放数据mutations: 存放操作数据的方法actions: 存放一些异步操作 (也可以进行一些同步处理) 注意: actions是不能直接修改state数据的, 需要提交mutationgetters: 存放基于state计算出来的一些值 (计算属性)modules: 分模块, 项目大了, 也推荐分模块管理 (同模块的vuex操作, 就会在一起)注意点: 分模块了, 默认muations, actions, getters 注

我们已经非常熟悉单个的vue组件的生命周期执行顺序了，但是，如果有嵌套组件，父子组件的生命周期的执行顺序是什么？当父子组件在加载的时候，执行的先后顺序为父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted然后理解下这个顺序：1.当父组件执行完beforeMount挂载开始后，会依次执行子组件中

对话框，消息提示，确认提示，通知组件 适合使用传送门<!-- 对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门 Teleport --><Teleport to="#dailog"> <OrderCancel ref="orderCancelCom" /></Teleport>...

倒计时效果import { useIntersectionObserver } from '@vueuse/core'import { ref } from 'vue'import dayjs from 'dayjs'// ???? 作业：倒计时效果export const usePayTime = () => { const time = ref(0) const timeText = ref('') const { resume, pause } = useIntervalF

v-if和v-show的区别当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。而且 v-if 不停的销毁和创建比较消耗性能。总结：如果要频繁切换某节点，使用 v-sho

1.vue2中自定义全局指令① 定义// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})② 使用<input v-foucs="'xxxx'" />2.vue3中自定义全局指令① 定义// app是Vue实例。 e.g: app = createApp()a

目的：通过vue实例调用$confirm函数弹出确认框。import导入函数使用也需要支持。分析功能实现组件基础结构和样式。实现函数式调用组件方式和完成交互。加上打开时动画效果。给购物车删除加上确认框。给vue挂载原型函数$confirm实现函数式调用组件方式和完成交互封装确认框组件xtx-confirm.vue<template> <div class="xtx-confirm"> <div class="wrapper" ref=.

商品详情-数量选择组件功能分析：需要完成v-model得实现默认值为 1可限制最大最小值点击-就是减1 点击+就是加1存在无label情况基础布局代码<template> <div class="xtx-numbox"> <div v-if="label" class="label">{{ label }}</div> <div class="numbox"> <a @click="b.

QQ互联官网遇到问题由于域名是www.corho.com和localhost不一致无法回调页面，需要在本地修改hosts地址。windows1. 找到 C:\Windows\System32\drivers\etc 下hosts文件2. 在文件中加入 127.0.0.1 www.corho.com3. 保存即可。# 如果提示没有权限1. 将hosts文件移到桌面，然后进行修改，确认保存。2. 将桌面hosts文件替换c盘文件host// 不要带 # 号127.0

参考 Element Plus 组件库：Message 消息提示组件组件功能分析：固定顶部显示，有三种类型：成功，错误，警告。组件使用的方式不够便利，封装成工具函数方式。显示消息提示时需要动画从上滑入且淡出。定义组件：src/components/library/xtx-message.vue<template> <transition name="down"> <div class="xtx-message" :style="style[ty

keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其包裹组件的渲染keep-alive介绍与应用keep-alive是什么keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。场景用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面..

目的： 封装一个高复用的面包屑组件，适用于多级场景。认识 render 选项和 h 函数。参考element-ui的面包屑组件// el-breadcrumb-item标签表示从首页开始的每一级。<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href=.

目的： 自动的批量注册组件。大致步骤：使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。然后 context 函数会返回一个导入函数 importFn它又一个属性 keys() 获取所有的文件路径 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象遍历的同时进行全局注册即可手动注册组件批量注册组件// 导入library文件夹下的所有组件// 批量导入需要使用一个函数 require.context(di.

组件数据懒加载我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。大致步骤：理解 useIntersectionObserver 的使用，各个参数的含义改造 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法封装 useLazyData 函数，作为数据懒加载公用函数使用懒加载方式先分析下这个useIntersectionObserver

图片懒加载目的： 当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。基于vue3.0和 useIntersectionObserver 封装懒加载指令下载@vueuse/core工具库官方网站：https://vueuse.org/functions.html安装：@vueuse/core 包，它封装了常见的一些交互逻辑。npm i @vueuse/core或yarn add @vueuse/corevue3 封装自定义指令index.jsimport default

目的：使用vue-cli创建一个vue3.0项目。方法1：第一步：打开命令行窗口, 执行 vue ui 命令注意，所在目录将会是你创建项目的目录。第二步：选择自定义创建第三步：选择vue3.0版本第四步：配置element-UI 组件库安装element-ui 插件配置element-ui第五步：配置 axios 库依赖 > 安装依赖方法二：第一步：打开命令行窗口。注意，所在目录将会是你创建项目的目录。第二步：执行创建项目命令行第三步：选择.

Mock 可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端分离，提高效率。1、安装npm i mockjs -Soryarn add mockjs2、引入在src文件目录下，新建mock.js文件并引入：const Mock = require('mockjs')之后，在main.js文件中加载mock.js``require(./mock.js)3、简单使用格式： Mock.mock (“请求的URL地址”, {“数据对象”})Mock.mock(url,

在根路径下新建 jsconfig.json 可以让 IDEA识别项目的别名（如：@）{ "compilerOptions": { "target": "es2017", "allowSyntheticDefaultImports": false, "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "di

Day03知识点自测 会自己定义数据结构"红色","red", "蓝色","blue", // 上面的数据结构, 要用1个变量来装这4个值, 用什么数据结构呢?(数组还是对象) - 对象(可映射key->value) "小明", "小蓝", "小赵"// 上面的结构用数组比较合适 马上能反应过来循环遍历是什么, 索引(下角标)是什么let arr = [10, 32, 99];// 索引就是数字, 标记每个值对应的序号, 从0开始// 索引是0, 1, 2//

今日学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例1. vue组件1.0_为什么用组件以前做过一个折叠面板[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ee8WhgPK-1625833776951)(images/image-20210115092834016.png)]需求: 现在想要多个收起展开的部分方案1: 复制代码代码重复 冗余不利于维护案例用less写的样式, 所以下载yarn

今日学习目标能够说出vue组件生命周期能够掌握axios的使用能够了解$refs, $nextTick使用和name使用能够完成购物车案例开发1. vue生命周期1.0_人的-生命周期一组件从 创建 到 销毁 的整个过程就是生命周期1.1_钩子函数目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法

今日学习目标能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发1. 组件进阶1.0 组件进阶 - 动态组件目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息效果如下:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWe03eJv-1625832204058)(images/动态组件.gif)]准备被切换的 - UserN

在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复解决：router文件夹下面的index.js中加上下面几句代码，搞定// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location)

知识点自测 url的组成部分都有哪些, hash值指的什么今日学习目标能够了解单页面应用概念和优缺点能够掌握vue-router路由系统使用能够掌握链接导航和编程式导航用法能够掌握路由嵌套和路由守卫能够掌握vant组件库基础使用1. vue路由简介和基础使用1.0 什么是路由目标: 设备和ip的映射关系[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00fCeVlI-1624155066950)(images/image-20210512095