- 博客(35)
- 收藏
- 关注
RSS订阅原创 2023前端面试必备问题（vue3）
新的合成型API能让我们用方法（function）stup(){}来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 ，结合发布订阅模式的方式来实现的。Vue2把数据放在data中，在Vue3中，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据。
2023-04-12 14:34:08
340
原创 2023前端面试问题总结（vue）
Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响.
2023-04-12 10:33:47
982
转载 /deep/或::v-deep和 ＞＞＞ 操作符
之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。百度之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错）***。没想到官方文档中其实早就给
2022-03-09 16:02:04
633
转载 vue中try...catch的使用
vue中try…catch的使用 try-catch主要用于进行异常处理；11.防止因为错误而造成系统崩溃在程序逻辑中, 需要在易出现问题的逻辑代码片段上, 加持try-catch方法, 这样做可以抛出错误, 但是不会影响整个程序运转;try { // 你的逻辑代码} catch (e) { // 错误处理代码片段}...
2022-03-09 11:18:31
3619
原创 代码管理工具--git
一、介绍: Git(读音为/gɪt)是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 当多人开发过程中,git 能够很好的管理代码,能够对代码历史追溯。二、专有名词: ○ workspace: 工作区 ○ Index/Stage: 暂存区 ○ Repository: 仓库区(或者是本地仓库)
2021-11-16 14:48:39
601
原创 Vue 指令实现按钮级别权限管理功能
在项目中经常有需求要根据用户的权限对界面上的元素进行控制，这里介绍了一直简单的实现，仅供参考。当前用户的权限列表储存在 store 里，也可以是其他地方。指令：// src/directives/permission.jsimport Vue from 'vue';import store from '@/store';import {get} from '@/utils';// 是否有权限const hasPermission = userPermission => {
2021-11-16 14:46:41
366
原创 js中怎样替换掉字符串中的第偶数个逗号
这是我截取好的数据形式var a1="12129073,4033520,12128798,4033513";需要的数据形式var a2="12129073,4033520;12128798,4033513";第一种：var a1="12129073,4033520,12128798,4033513,12345";var a2 = a1.replace(/(\d+),(\d+),/g,"$1,$2\;");alert(a2);使用这种形式， 已测试通过第二种：var a1 = "
2021-11-16 14:43:55
1000
原创 与或非逻辑运算符用法详解
运算符 含义 效果 && 与 将两个表达式连接成一个。两个表达式必须都为 true，整个表达式才为 true || 或 将两个表达式连接成一个。必须有一个或两个表达式为 true，才能使整个表达式为 true。只要其中有一个为 true，那么另外一个就变得无关紧要 ！ 非 反转一个表达式的“真相”。它使一个表达式从 true 变成了false，或者从 false变成了true && 逻辑 子表达式值...
2021-11-16 14:41:49
1980
转载 vue中mixins的使用方法和注意点（详）
mixins基础概况vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。怎么用？举个栗子：定义一个混入对象把混入对象混入到当前的组件中用法似不似相当简单呀mixins的特点1 方法和参数在各组件中不共享混合对象中的参数num组件1中的参数num进行+1的操作组件2中
2021-11-16 14:31:49
283
原创 Vue项目使用富文本之tinymce-vue
最近做一个后台管理系统需要用到富文本编辑器，几经了解后决定发现tinymce比较轻易且容易上手，记录下使用过过程，一下环境是在vue cli3进行的：附上官方文档：https://github.com/tinymce/tinymce-vuehttps://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide一、安装npm install --save @tinymce/tinymce-vue一
2021-11-16 14:27:15
629
原创 webpack-obfuscator js代码混淆
使用：（作用：第三方公司使用公司软件，使用这个插件可以保护源码，它会在源码中加入废代码段，字符编码转义使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的）npm install --save-dev javascript-obfuscator webpack-obfuscator在vue.config.js中引入使用const WebpackObfuscator = require('webpack-obfuscator');plugins: [ new WebpackObf
2021-11-16 14:25:28
1417
原创 Vue祖孙关系组件怎么传值？
一般如果父子组件的情况,我们会使用$emit与@on来进行传值，但是如果组件的层级比较多，有了孙级组件甚至更深。那我们向上一层层的传递是不是很麻烦，这个时候我们就可以使用eventBus来做！1.在顶层组件中引入vue 然后new一个vue实例import Vue from 'vue'data:()=>({ eventBus: new Vue()}),2.使用依赖注入//顶层组件provide:function(){ //依赖注入 return {
2021-09-16 09:23:36
1448
原创 vue中mode hash 和 history的区别
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持： 1.hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现...
2021-09-13 17:59:07
214
原创 什么是跨域,为什么会有跨域?怎么解决跨域？
跨域:浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域为什么会有跨域:在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以..跨域问题出现跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没
2021-09-13 11:49:05
364
原创 vue 强制清除浏览器缓存
（1）最基本的方法就是，在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳//在vue.config.js 文件中，找到output：const Timestamp = new Date().getTime()output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`, chunkFilen
2021-09-13 11:38:23
5735
原创 js 检测浏览器内核 vue navigator.userAgent获取浏览器信息(类型及系统)
function getBrowserInfo(){ var ua = navigator.userAgent.toLocaleLowerCase(); var browserType=null; if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE"; browserVersion = ua.match.
2021-09-06 16:36:21
2178
转载 Vue push() pop() shift().....
变异方法push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。eg:数组 中添加新元素new Vue({ data:{ arr: ['苹果','香蕉','橙子'] }, methods:{ addData(){ this.arr.push("石榴"); } } })运行结果为：苹果，香蕉，橙子，石榴pop() 方法用于删除并返回数组的最后一个元素。eg:移除最
2021-08-31 10:30:48
2260
原创 vue-router的push和replace的区别
methods: { gotoMenu(){ //跳转到上一次浏览的页面 this.$router.go(-1) this.$router.go(-1) //指定跳转的地址 this.$router.replace('/menu') this.$router.replace('/menu') //指定跳转的路由的名字下 this.$router.replace({name:'menu'}) this.$router..
2021-08-31 10:21:10
182
原创 vue-router重写push方法，解决相同路径跳转报错
修改vue-router的配置文件，默认位置router/index.jsimport Vue from 'vue'import Router from 'vue-router' /** * 重写路由的push方法 * 解决，相同路由跳转时，报错 * 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5") */ // 保存原来的push函数const routerPush = Router.prototype.pus.
2021-08-31 10:18:07
350
原创 vue @click.native和@click.stop和@click.self
参考一：vue @click.native 原生点击事件：1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符）2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn)参考二：在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻...
2021-08-28 11:36:13
958
原创 微信小程序生命周期总结
微信小程序生命周期分类应用生命周期 页面生命周期 组件生命周期应用生命周期小程序被使用和关闭就代表这个周期的开始与结束，它是入口文件（根目录下的app.js/app.vue/app.jsx）所使用的的。(1)onLaunch：初始化小程序时触发，全局只触发一次。官方说明：生命周期回调——监听小程序初始化。(2)onShow：小程序初始化完成或用户从后台切换到前台时触发官方说明：生命周期回调——监听小程序启动或切前台。(3)onHide：用户从前台切换到后台时触发官方解释：生.
2021-08-28 10:43:39
276
原创 画出0.5px的线-css-js-前端面试题
1.直接写在不通浏览器下显示不同2.使用scale缩放transform：scaleY（0.5）加上transform-origin：50% 100%；3.线性渐变linear-gradient(0deg,#fff,#000)4.boxshadow:0 0.5px 0 #000;5.viewport:<meta name="viewport" content="width=device-width,initial-sacle=0.5">其中width=device-width表示
2021-08-28 10:34:02
484
原创 css实现三角形
css实现三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }伪元素定位实现
2021-08-28 10:30:31
47
原创 js运行机制，宏观任务和微观任务
异步又分为宏观和微观 微观的优先级是大于宏观的 可能我描述的不清楚宏观的事件有: html的解析 定时器 I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)微观的事件有:promise的then和catch 等在一个宏观任务中 只有微观任务全部运行完毕后才会继续执行下一个宏观任务下面看一段代码setTimeout(() => console.log("d"), 0);Promise(function(re
2021-08-28 10:29:28
328
原创 js-如何判断数组是类型
1.用typeof运算符来判断2.用instanceof判断instanceof运算符可以用来判断某个构造函数的prototype属性所指向的對象是否存在于另外一个要检测对象的原型链上。在使用的时候语法如下： object instanceof constructor3.用constructor判断 console.log(a.constructor == Array);//true4.用Object的toString方法判断 const a = ['Hello','Howard'];
2021-08-28 10:26:51
457
原创 js-深拷贝和浅拷贝
深拷贝拷贝的是对象或者数组内部数据的实体，重新开辟了内存空间存储数据；浅拷贝拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存；简单说数据的赋值，简单的数据直接赋值是没有问题的问题：var arr1 = new Array(12,23,34) Var arr2 = arr1;//这就是一个最简单的浅拷贝//写函数 function copyObj(obj){ let newObj={}; for(let key in obj){ if(typeof...
2021-08-28 10:21:54
76
原创 前端面试题-js-es6语法
1. es6语法es6数组的处理方法forEach()①数组名.forEach（function（数组中一个元素的值）{对这个值进行处理....}）②数组名.forEach（test）test为方法名，不用加（），把函数引用传进去map()①map（）方法一定要有一个返回值，没有返回值的话就会返回一个undefined②map（）方法的返回值是一个数组③应用场景：要返回一个要利用原数组经过运算后的数组，或者是在一个对象数组中要拿到某一个属性，并且返回一个新数组的情况fil
2021-08-28 10:14:26
119
原创 前端面试题-vue
插槽： 默认插槽：创建<myslot></myslot> 引入import myslot from './myslot'; 新建 myslot.vue <slot></slot>标签可以展示<myslot></myslot>内部标签 作用：让用户可以拓展组件，去更好地复用组件和对其做定制化处理，可以替换文本<slot></slot>能实现组件中的位置动态替换，不填默认显示<slot></slot
2021-08-28 09:50:58
62
原创 vue 组件如何首次加载就触发 watch
首次加载执行函数需通过其immediate 属性进行配置，默认为false监听数组值变化需通过其deep属性进行配置，默认为falsewatch:{ "aaa":{ immediate:true, // 首次加载的时候执行函数 deep:true, // 深入观察,监听数组值，对象属性值的变化 handler:function(){ }}...
2021-08-27 17:25:25
901
原创 vue父路由调用子路由方法及子路由调用父路由方法
父路由调用子路合理运用ref属性<template> <div> <router-view ref="Childmain"/> </div></template><script> created(){ this.$refs['Childmain'].childe() }</script>调用时可能会出现报错,没猜错的话报错原因是子路由还未加载，这
2021-08-26 18:12:02
1669
原创 Vue父组件调用子组件方法，子组件调用父组件的方法(组件通讯)
方法一：//父组件<template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div></template><script> import HelloWorld from '@/components
2021-08-26 18:04:00
273
原创 vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格
由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。下面请看代码： <el-row> <el-row> <el-col><span>可选择属性:</span></el-col> <el-col> <el-checkbox-group v-model="checkArr" size="medium">
2021-08-26 17:45:22
2819
2
原创 vue中的.sync修饰符用法及原理详解，解决组件之间传值动态修改问题
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：//父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit('setAge',12345
2021-08-26 15:47:53
451
原创 JS如何清除视频标签video内存 ，vue项目
// 第一种方法 使用v-if进行显示与隐藏，从刷新video标签，从而实现刷新效果// 第二种方法<video v-if="dataForm.url.indexOf('.mp4')>0" width="320" height="240" controls autoplay id="video"> <source :src="dataForm.url" type="video/mp4"> <source :src="data...
2021-08-26 14:07:11
4277
原创 一个页面中有多个audio标签，播放其中一个时暂停其他，只允许一个audio播放
var audios = document.getElementsByTagName("audio");// 暂停函数function pauseAll() { var self = this; [].forEach.call(audios, function (i) { // 将audios中其他的audio全部暂停 i !== self && i.pause(); })}// 给play事件绑定暂停函数[].forEach...
2021-08-26 13:51:40
1540
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人