- 博客(22)
- 收藏
- 关注
RSS订阅
原创 前端面试题 腾讯微视
1.axios和ajax的区别相同点：都是执行异步请求操作不同点：大小 axios体积小 只需在要使用的目录下npm install axios --save ajax 需要导入jQuery【体积较大 只是为了ajax去引入是不值得的】 针对方向 axios 符合前端MVVM的浪潮 ajax 本身是针对MVC的编程 实现方法与返回值 axios 用promise技术实现对ajax技术的封装 返回值是 promise ajax 基于原生的XHR开发，XHR...
2020-09-03 23:02:15
925
原创 前端实现打印
先下载插件print-jsnpm install print-js --save 然后在页面引入import printJS from 'print-js'具体使用<template> <div> <el-button round class="btn" @click="handlePrint(item)">打印</el-button> </div></template><s
2022-04-12 16:32:01
962
原创 前端实现在浏览器下载图片
首先在项目中untils中增加一个工具函数，downloadPng.jsfunction downloadIamge(imgsrc, name) { // 下载图片地址和图片名 var image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { const canvas = document.createE
2022-04-12 14:48:01
589
原创 前端实现文件导出
方法一：const blob = new Blob([r], { type: 'application/vnd.ms-excel' })if ('download' in document.createElement('a')) {const elink = document.createElement('a')elink.download = '学员数据.xlsx'elink.style.display = 'none'elink.href = URL.createObjectU
2022-04-01 14:13:27
1514
原创 实现文字或者链接复制
<template> <div> <div @click.native="copyExamUrl">复制考试地址</div> <input type="text" style="opacity: 0" id="copyInput" /> </div></template><script>export default { methods: { // 复制地址 .
2022-04-01 13:41:05
237
原创 JSON.parse和JSON.stringify的区别
JSON.stringify() ：将JS对象转换为JSON格式 // 测试用例1：let str = {a: 'test', b: 123};console.log('-----------str:', JSON.stringify(str));-----------str: {"a":"test","b":123} JSON.parse() ：将JSON字符串转换成对象 // 测试用例1：let str = '{"a":"test","b":123}';consol
2022-03-01 13:59:15
85
原创 JS输出26个英文字符
JS输出26个英文字符for(var i=0;i<26;i++){console.log(String.fromCharCode(65+i));//输出A-Z 26个大写字母}for(var i=0;i<26;i++){console.log(String.fromCharCode(97+i));//输出a-z 26个小写字母}
2022-03-01 13:58:21
424
原创 React Hook
propsprops指的是组件内地一种传递方式组件内地属性this.props是只读不可修改的statestate是组件内部的状态（数据）不能直接修改，需要通过this.setState来改变值的状态
2021-09-28 09:41:49
67
原创 ES6的新特性
1. const let varvar声明的变量是全局变量，声明变量的时候存在变量提升，无论声明在何处，一般都被视为声明在函数的最顶部。var x = '全局变量';{ let x = '局部变量'; console.log(x); // 局部变量}console.log(x); // 全局变量let声明的是局部变量，const表示声明常量，两者都为块级作用域。const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了，如果const的是...
2021-09-28 09:28:00
63
原创 Vue3.0学习笔记
目录一、组合API二、reactive函数三、ref函数四、ref和reactive的区别：五、递归监听和非递归监听递归监听非递归监听应用场景六、toRaw七、markRaw八、ref、toRef、toRefs一、组合APIsetup函数是组合API的入口函数。setup函数执行时机是在beforeCreate和Created之间。在setup函数中，不能使用data和methods，为了避免出现错误，setup中的this为un...
2021-07-26 18:04:27
214
原创 Vue-Router详解
1.安装和使用vue-router步骤一：安装vue-router ：npm install vue-router --save步骤二：在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 第一步：导入路由对象，并且调用 Vue.use(VueRouter)import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ...
2020-11-26 18:45:38
102
原创 url中的hash和H5中的history
hash模式URL的hash也就是锚点(#), 本质上是改变window.location的href属性.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新history模式history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.通过window.history来处理url history在H5之前有go(),back(),forword()三个API，后来增加pushState(),replaceState()...
2020-11-19 10:21:45
804
原创 箭头函数和this的指向
函数的使用// 1.定义函数的方式: function const aaa = function () { } // 2.对象字面量中定义函数 const obj = { bbb() { } } // 3.ES6中的箭头函数 // const ccc = (参数列表) => { // // } const ccc = () => { }箭头函数参数问题// 1.参数问题: // 1.1.放入两个参数 ..
2020-11-18 17:21:21
105
原创 Vue程序运行过程
如果在开发中，使用template，就需要选择Runtime-Compiler如果在开发中，使用的是.vue文件夹开发，那么可以选择Runtime-onlyruntime-compiler:template -> ast ->render -> v-dom -> domruntime-only:render -> v-dom -> dom...
2020-11-18 16:24:55
243
原创 webpack和gulp、grunt的区别
grunt/gulp的核心是Task 我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css） 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。所以grunt/gulp也被称为前端自动化任务管理工具。我们来看一个gulp的task 下面的task就是将src下面的所有js文件转成ES5的语法。 并且最终输出到dist文件夹中。什么时候用grunt/gulp呢？如果你的工程模块依赖非常简单，甚至是没有用到模块.
2020-11-18 15:26:39
1147
原创 vue中父子组件通信
父子组件之间进行通信的方式如下：父子通信：通过props向子组件传递数据子父通信：通过事件向父组件发送消息1.父组件向子组件传递消息props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。// Parent.vue<template> <div class="parent"> <v-child :msg="message"></v-chi..
2020-11-16 11:25:12
167
1
原创 v-model的使用以及原理
v-model的使用以及原理vue中的v-model主要是用于表单元素和数据的绑定。除了在input中使用，也可在textarea中使用。方法一：<div id="app"> <input type="text" v-model="message" /> <h2>{{message}}</h2></div><script src="./js/vue.js"></script><script&.
2020-11-13 17:07:22
417
原创 JavaScript高阶函数的使用
高阶函数所谓高阶函数，就是函数中可以传入另一个函数作为参数的函数。常用的高阶函数有：filter、reduce、map、sort。filter：筛选元素，返回boolean值const nums = [150,120,90,85,75];let numNums = nums.filter(function(n){ return n < 100})console.log(newNums);map// // 2.map函数的使用// // 20, 40, 80.
2020-11-12 22:00:57
80
原创 vue中的数组哪些方法是响应式的
vue中的数组哪些方法是响应式的，通过刷新改变DOM我们常用到的操作数组的方法都是响应式的，可以对数组进行相应的操作push()尾部插入DOM// push方法 this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc')pop() 尾部删除//pop(): 删除数组中的最后一个元素 this.letters.pop();shift（）头部删除//shift(): 删除数组中..
2020-11-11 17:46:04
691
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人