自学前端
(´ꑣ`)走啊,去学习
这个作者很懒,什么都没留下…
展开
-
在钉钉小程序中使用可视化图表插件F2
阿里系的可视化图表如何使用?看下面的代码 <view class="f2-chart"> <f2 onInit="onInitChart"></f2> </view>onInit 绑定初始化函数 onInitChart(F2, config) { const chart = new F2.Chart(config) const data = this.data.chartsData chart.source(dat原创 2022-03-03 18:11:50 · 1025 阅读 · 1 评论 -
vite 删除 node_modules 后再npm i vite.config.ts报错但是不影响使用的问题
比如说 @vitejs/plugin-vue 找不到打开控制台 输入 npm i @vitejs/plugin-vue 即可解决原创 2022-03-03 18:05:16 · 427 阅读 · 0 评论 -
websocket 配置 vue
data(){ return { socket:null }} mounted() { // 初始化 this.init() },// 组件被销毁时关闭监听,如不关闭,websocket会一直挂载 beforeDestroy() { this.close() },methods: { // 进入聊天室,连接socket init: function () { let that = this if (typeof W.原创 2021-05-02 02:26:34 · 313 阅读 · 0 评论 -
面试题学习笔记(一)
扩展运算符……是es6新增的运算符,作用是扩展对象。var a = ['1','2','3']var b = ['4','5','6']var z = function(){ let num = '2' console.log(num)}//现在有一个需求,合并两个数组 和一个函数//如果直接赋值var e = [a, b] // [[a],[b]] //如果用es5,可以这样var c = a.concat(b) //['1','2','3','4','5','6']//如果使用原创 2021-03-29 22:53:06 · 67 阅读 · 0 评论 -
vue ‘echarts‘ 5.x版本以下和5.x版本引入的区别
// 5.x以下引入import echarts from "echarts";// 5.x echarts 引入版本import * as echarts from 'echarts'原创 2021-03-17 11:55:11 · 626 阅读 · 1 评论 -
v-charts Can‘t resolve ‘echarts/lib/visual/dataColor‘
查找原因: echarts-liquidfill 版本号对不上v-charts 是 ^2.0.2 echarts 是 ^2.0.6解决方案 : npm i v-charts echarts@4.9.0 -S 给echarts降级参考链接:添加链接描述转载 2021-03-17 11:02:15 · 1354 阅读 · 0 评论 -
vue2.0切换页面websocket仍然连接的解决方案
vue 是单页面的,在路由切换的时候,websocket的close()方法断开不了连接,不管是放在beforeDestroy()还是destroyed()里,打开网络监控的ws里发现它还是存在。然后我发现websocket在刷新页面后,会自己断开连接,所以我的解决方案是在销毁的那个生命周期里调用destroyed() { this.close() this.$router.go(0) },...原创 2021-01-22 11:09:11 · 2689 阅读 · 4 评论 -
wow.js配合animated在vue中的使用
先安装npm install wowjs --save-dev//animate.css 自动安装。在main.jsimport animated from 'animate.css'import 'wowjs/css/libs/animate.css'Vue.use(animated)在需要使用wow.js 的组件里import { WOW } from 'wowjs' mounted() { var wow = new WOW({ boxClass: 'wow'转载 2021-01-18 13:12:02 · 201 阅读 · 0 评论 -
VUE2.0封装共用轮子
在自己的assets里创建一个 js 如下 util.js export default { queryMes: async function() { console.log('123') }}然后在main.js里导入该文件,同时声明它// 引入工具jsimport util from './assets/js/util'Vue.prototype.$util = util之后在任何的vue文件里直接使用就好了,如下this.$util.queryMes().原创 2020-12-25 14:54:48 · 95 阅读 · 0 评论 -
如何编写可维护、健壮的前端代码?——前端编码规范制定
前言我认为代码不只是为了实现某个需求,更是给别的人看的。团队制定一个好的编码规范,能让大家更清晰的去理解代码。只有高质量的代码,才能有优化的可行性。更利于项目的版本迭代和拓展。前段时间为公司制定了编码规范,在这里分享一下如果感觉文章对你有帮助的话,留个赞再走吧~js(vue)写法推荐变量和普通使用camelCase小驼峰式命名(tableData,isVisible),构造函数使用大驼峰式命名vue文件命名对于展示类的、无逻辑的或无状态的基础组件可以单独放在一个文件夹中管理,和父组件紧密耦转载 2020-12-14 15:55:17 · 185 阅读 · 0 评论 -
vuecli3 4打包项目打开index.html显示空白的问题
在根目录创建一个文件 vue.config.js ,其内加入module.exports = { publicPath: './', assetsDir: 'static', outputDir: 'dist'}然后重新打包原创 2020-12-02 10:03:58 · 180 阅读 · 0 评论 -
Vue axios post 传参数,后台接收不到数据为 null
由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理nmp install qs --saveaxios 本身自带了 qs 不用再引入了在main.js 中引入,声明全局import qs from 'qs'Vue.prototype.$qs = qs在 post 请求中 使用async getTest3() { const { data: res } =原创 2020-11-25 11:32:35 · 721 阅读 · 0 评论 -
如何让伪元素显示在底部?
伪元素 ::after ,::before 是常用的css元素,挺好用的,如果让它与一个元素堆叠显示在底部,就要在该元素外层套一个div,给该div设置一个伪元素,然后给伪元素的z-index 设置成负数就行,不要忘了给伪元素加上content: ‘’;不然伪元素是不会显示的...原创 2020-11-23 15:08:10 · 1617 阅读 · 0 评论 -
vue-router 路由守卫控制
在使用vue的路由功能,在进入某一个路由的时候路由守卫方法被调用,检查该路由是否被准许通行,有一些路由不需要限制就直接next()下一步不做任何操作。// 全局路由导航拦截 路由守卫router.beforeEach((to, from, next) => { if (to.path === '/ssss') return next() if (to.path === '/cccc') return next() if (to.path === '/aaaa') return nex原创 2020-11-23 14:03:09 · 99 阅读 · 0 评论 -
element-ui 分页器 el-pagination 组件再封装
html<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handleSizeClick" :current-page="pagenum" hide-on-single-page > </el-pagination>j原创 2020-11-23 13:59:25 · 157 阅读 · 0 评论 -
vuex在页面刷新后数据的解决方法
vuex在页面F5刷新后数据丢失,如果在页面刷新之前将数据存储在不会消失的地方,在页面重新加载再讲数值赋值回来就OK这里用到一个插件 vuex-persistedstatenpm install --save vuex-persistedstate在store 的 index.js 引入import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({ plugins: [ cr原创 2020-11-23 13:51:47 · 319 阅读 · 0 评论 -
记录一下element-ui 自定义上传图片的问题
这个问题困扰了我好久,感谢后端的同事大佬指点,终于调用接口成功了先上代码<el-upload class="avatar-uploader" ref="uploadToux" //绑定ref action //由于使用自定义的上传,所以这里不填也是可以的 accept=".jpg,.jpeg,.png,.bmp" //限制文件原创 2020-10-23 16:42:29 · 207 阅读 · 1 评论 -
vue element-UI后台管理系统学习笔记(一)
登录业务流程在登录页面输出用户名与密码调用后台接口进行验证通过验证之后,根据后台的响应状态跳转到项目主页登录业务的相关技术点http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态登录/退出token原理分析token相当于验证码登录功能的实现1. 登录页面的布局通过Element-UI组件实现布局el-formel-form-itemel-inputel-button字体图标...原创 2020-07-07 14:41:48 · 277 阅读 · 0 评论 -
vscode编译器报警告,每次格式化都会出现分号和双引号
新建一个文件在根目录,文件名为.prettierrc,文件内输入{ "semi":false, "singleQuote":true}问题解决原创 2020-07-06 15:11:02 · 541 阅读 · 0 评论 -
Window.sessionStorage.Item()
使用 sessionStorage 创建一个本地存储的 name/value 对,name=“lastname” value=“Smith”sessionStorage.setItem("lastname", "Smith");localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。提示: 如果你想在浏览器窗口关闭后还保留数据,可以转载 2020-07-06 14:42:43 · 260 阅读 · 0 评论 -
跨域问题
Access to XMLHttpRequest at ‘http://localhost:8080/api/user/login’ from origin 'http://localhost:808整个替换掉原先跨域代码app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested转载 2020-07-05 21:08:55 · 79 阅读 · 0 评论 -
js学习笔记(一)权限修改
appendChild()向节点的子节点列表的末尾添加新的子节点,可移动一个元素到另一个元素。var yd=document.getElementById("Li2");document.getElementById("Li1").appendChild(yd);HTML代码 <select name="" id="selNum1" multiple="multiple"> <option value="1">添加</option> &原创 2020-07-05 16:18:33 · 238 阅读 · 0 评论 -
node.js 学习笔记一
node.js 的基本信息node.js 是一个机遇 Chrome JavaScrip t运行时建立的一个平台。node.js 是一个事件驱动 I / O 服务端的javaScript环境。node.js 的开发语言是 javaScript,所以是事件驱动的。node.js 没有浏览器,没有 dom,没有 onclick 之类的东西。node.js 下载安装node.js 下载安装配置环境查看当前 node.js 的版本node -v 使用 node 命令来执行 js 文件node d原创 2020-07-04 22:18:09 · 89 阅读 · 0 评论