08 2022 档案
摘要：1、固定布局 （1）适用于局部元素固定位置（例如：返回顶部的按钮固定在页面底部） （2）适用于h5页面整个页面尺寸、元素比例的控制 2、流式布局 依据文档流本身的特点，不做控制，自上往下排布 3、弹性布局 em：相对于父元素标签上设置的font-size值得倍数单位。比如父元素标签上设置了font-
阅读全文
摘要：1、全局导航守卫 2、路由规则自己的守卫 3、组件内部的导航守卫
阅读全文
摘要：从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了什么？ 1、发请求： 浏览器向服务器发送HTTP请求 2、响应： 服务器返回 “ 二进制 ” 的HTML文件（以字节为单位），本质上是一个文本文件 3、生成DOM树： 浏览器按照一定的规则，把HTML文本文件转成浏览器自己能识别的符号标签序列，
阅读全文
摘要：vuex与localStorage的异同是什么？ （1）刷新页面时 vuex：由于vuex中的数据是存储在运行内存中的，所以刷新页面，会重新加载vue实例，vuex中的数据会初始化，导致数据丢失。 localStorage：localStorage中的数据是永久性存储的，即使浏览器关闭，数据也不会被
阅读全文
摘要：vuex中使用modules 工作中，如果遇到不同的业务模块，需要用到vuex，如果全部写在同一个文件中，会很难管理，我们想分各自写各自的，就会用到modules 假设有用户模块：userModule 还有购物车模块：cartModule userModule.js cartModule.js st
阅读全文
摘要：1、State 唯一公共数据源 （1）组件中访问State数据的第一种方式： （2）组件中访问State数据的第二种方式： 2、Mutation 更改store中的数据的唯一方法是提交 mutation，不能直接操作store中的数据 如果在组件中各自修改store中的数据，那如果出现bug，很难追
阅读全文
摘要：1、vuex的作用是什么？ 实现组件数据共享 （可以先初步理解为把一些数据存在localStorage中，不管哪里需要，都能取到） 2、vuex的使用场景（先有个初步印象） （1）后台管理系统： 用户登陆之后，用户名、用户登陆标识等信息就需要存在本地共享 （2）电商系统 购物车 加入或 移出 购物车
阅读全文
摘要：FormData的作用： （1）模拟 HTML 的表单，相当于将 HTML 表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 （2）异步上传二进制文件（图片、视频等等） 应用一：表单对象中的数据拼接 应用二：axios 和 FormData 进行文件上传
阅读全文
摘要：传统网站中的问题： 网速慢得情况下，页面加载事件长，用户只能等待； 表单提交后，如果一项内容不合格，需要重新填写所有表单内容； 页面跳转，需要重新加载页面，造成资源浪费，增加用户等待时间 Ajax是什么？ 是浏览器端提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站的体验 什么是请求报文？
阅读全文
摘要：1、接口跨域问题 vue项目运行地址是：http://localhost:8080/ API接口运行地址是：https://192.168.0.0/api/ 由于协议、域名、端口都不一样 跨域 如果API接口没有开启CORS跨域资源共享，则就需要前端想办法解决跨域问题~ 2、前端通过代理解决接口跨域
阅读全文
摘要：什么是拦截器？ 在每次【 发起Ajax请求 】和【 得到响应 】之前，自动被触发，进行相应的处理 请求拦截器： axios.interceptors.request.use（成功回调，失败回调） 响应拦截器： axios.interceptors.response.use（成功回调，失败回调） （1
阅读全文
摘要：1、vue2每个模块必须有一个根节点，vue3则不需要 分隔 2、创建vue应用的方法不一样 分隔 3、全局注册组件的方式不一样 分隔 4、使用的vue-router版本不一样，创建路由实例的方法也不一样 vue2 使用 vue-router3.x 版本 安装：npm i vue-router@3.
阅读全文
摘要：已经全局安装了vue-cli，但是Windows PowerShell不识别vue命令： 解决办法： 1、以管理员身份运行PowerShell 2、执行set-ExecutionPolicy RemoteSigned 3、输入Y，回车，即可
阅读全文
摘要：导航守卫可以控制路由的访问权限。 全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。 打印一个值看看： 举例：需要登陆才能访问后台管理系统
阅读全文
摘要：命名路由的概念： 就是在定义路由规则时，为当前规则去一个名称，增加name属性。 name属性不能重复，必须保证唯一性~ （1）用命名路由实现声明式导航 （2）命名路由实现编程式导航
阅读全文
摘要：通过调用API实现导航的方式，叫编程式导航。 通过点击链接实现导航的方式，叫声明式导航。 （1）跳转到指定地址的API：this.$router.push('hash地址') （2）实现导航历史的前进、倒退API：this.$router.go(数值n)
阅读全文
摘要：动态路由的概念： 把hash地址中的可变部分用【英文冒号（：）+参数 】的形式进行定义 获取动态路由的参数值： （1）第一种获取方式：可以直接使用 $route.params对象访问到动态匹配的参数 效果： （2）第二种获取方式：在路由规则中开启允许props传参，然后在组件中用 props 接收路
阅读全文
摘要：1、声明子路由链接和子路由占位符 <template> <h2>>>about组件</h2> <!-- 子路由链接 --> <router-link to="/about/tab1">选项一</router-link> <router-link to="/about/tab2">选项二</route
阅读全文
摘要：1、默认的路由激活类名为：router-link-active 》》可全局统一写样式 效果为： 2、自己设置路由激活类名：创建路由对象时配置 linkActiveClass 效果：
阅读全文
摘要：路由重定向是指：用户在访问地址A时，强制用户跳转到地址C，从而展示特定组件。
阅读全文
摘要：单页面应用的路由原理： 单页面应用的整个项目只存在一个HTML文件，页面的切换 本质上 是 组件的切换； 所以，路由的作用是将组件与相应的URL路径相对应； 因为是单页面应用，所以，跳转页面时，既要让URL发生变化，又不能重新加载项目的HTML文件 hash模式： 利用web网页的锚点技术，在原有U
阅读全文
摘要：main.js中定义： 定义指令的函数为：directive（） 指令名称：第一个参数 fontcolor 被绑定的元素：回调函数的第一个参数 el 指令被设置的具体值：回调函数的第二个参数 binding 具体使用： 结果：
阅读全文
摘要：vue 提供了一个组件的占位符 ———— <component :is="组件名"></component>，用来实现动态切换组件的显示与隐藏 父组件中： 如果希望切换组件时，不要销毁组件，可以加上 <keep-alive></keep-alive>
阅读全文
摘要：ref 引用的作用 ——— 在不依赖jQuery的情况下，获取到DOM元素或者组件的引用; 每个vue的实例上，都包含一个 $refs 对象 1、得到当前组件中所有的 ref 引用 想通过ref属性得到DOM元素，必须先在标签上定义ref名字 结果： 2、利用 ref 改变标签样式 3、利用 ref
阅读全文
摘要：1、父组件中：provide 2、孙子组件中：inject 3、共享响应式的数据 computed 父组件中通过按钮事件改变数据，并用 computed 共享动态数据： 孙子组件中要加 value 属性来使用动态数据：
阅读全文
摘要：1、先安装 mitt 依赖包 npm i mitt@2.1.0 2、写一个公共的引入 mitt 的 js 文件 3、父组件 4、发送数据：BroOne bus.emit（" 约定好的事件名称 "，要发送的数据） 5、接收数据：BroTwo bus.on（" 约定好的事件名称 "，数据处理函数）
阅读全文
摘要：父组件： 子组件： emits : [ ' update:要传递的属性 ' ] 是固定写法！
阅读全文
摘要：每个vue实例创建时，都需要经历一系列的初始化步骤 1、设置好数据监听 2、编译模板 3、挂载实例到DOM 4、在数据改变时更新DOM 5、 组件的生命周期是指：组件从 创建 → 运行（渲染）→ 销毁 的整个过程 完整的生命周期：
阅读全文
摘要：1、watch 一般用法 监听值的变化，并执行相应操作 2、配置 immediate 为 true 组件刚加载，就执行watch进行监听 3、配置 deep 选项为 true 监听一个对象中的属性值发生变化时需要配置deep，否则无法监听到 4、监听对象中单个属性的变化
阅读全文
摘要：1、props类型有哪些？ 2、为同一个属性，指定多个可能类型 3、指定属性为“必填项” 如果未填，终端会有警告~ 4、指定属性的默认值 5、对属性值进行函数验证（validator）
阅读全文
摘要：1、【三元表达式】绑定 样式定义： 2、以【数组格式】动态绑定多个样式 样式定义： 3、以【对象格式】动态绑定多个样式 对象定义：（每一项名字和类名要保持一致） 样式定义： 4、以【对象格式】动态绑定内联样式 对象定义：
阅读全文
摘要：1、短横线命名法 使用时必须严格按照短横线名称进行使用。 2、驼峰命名法 使用时，可以转成短横线，也能直接使用驼峰命名
阅读全文
摘要：1、安装less支持包 npm i less -D 2、在style标签上加 lang="less" 3、less的基本使用 （1）嵌套的方式写样式 （2）可以定义变量 @变量名：变量值 （3）用& 指代父元素 （4）公共样式使用mixins
阅读全文
摘要：vue两种快速创建工程化SPA（单页面应用）项目的方法： vite：仅支持vue3；运行速度快；不是基于webpack打包 vue-cli：vue2、vue3都支持；运行速度较慢；基于webpack打包 用vite创建项目：npm init vite-app 项目名 进入项目文件：cd 项目文件 安
阅读全文
摘要：注：Vue3中已废弃filter 过滤器常用于文本的格式化 例如：helloworld >> Hello World 过滤器可以用在两个地方：{{ 插值表达式 }}和 v-bind 属性绑定 过滤器定义：
阅读全文
摘要：webpack是前端项目工程化的具体解决方案。 主要解决了以下问题： 代码压缩混淆、处理浏览器端JS代码兼容、性能优化等等 下面用一个例子，用webpack打包的方式解决浏览器对ES6语法的兼容问题~ 第一步：初始化包管理配置文件 npm init -y 第二步：创建源代码目录 src （固定的）
阅读全文
摘要：async和await是Promise嵌套的语法糖 不需要then（）就能取得异步函数的结果 async和await必须配套使用 举例：【没有async和await的情况】 function fn() { let r =new Promise((res, rej) => { let obj={ ag
阅读全文
摘要：在ES6模块化出现之前， 浏览器端一般使用AMD、CMD模块化规范； 服务器端一般使用CommonJS模块化规范； ES6相当于把各种规范进行统一，同时适用于浏览器端和服务器端 ES6模块化规范： 1、每个js文件都是一个独立模块 2、导入其他模块，使用 import 关键字 3、向外共享模块成员，
阅读全文
