- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue异步问题解决方法
第一种情况，需要在普通函数中使用axios返回的结果methods:{ async a(){ // res直接可以接收到异步的请求结果 let res = await this.b() }, b(){ // 这里可以直接返回axios的请求结果，不需要用then接收 return this.$axios.post(请求体) }}第二种情况，需要在异步的函数中使用另一个异步函数的返回值met
2022-03-03 17:06:27
12117
原创 element-ui中Table可编辑单元格,左右切换列表
效果图<template> <div class="home"> <el-table :data="tableData" style="width: 45%; margin: auto"> <el-table-column v-for="(item, index) in tableFile" :key="index" :prop="item.attribute" .
2022-01-25 16:03:55
1946
原创 使用路由前置守卫报栈溢出错误
路由前置守卫报栈溢出错误 RangeError: Maximum call stack size exceeded
2022-01-04 10:12:53
1175
1
原创 关于vant使用坑点
1.Sticky 粘性布局在iphone中不起作用，如果要做类似于粘性布局的样式，应该用 position: flex / absolute
2021-12-03 16:22:23
408
原创 自适应布局
浏览器窗口大于700px时的样式浏览器窗口小于700px时的样式实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-..
2021-11-15 14:12:11
117
原创 取消input中type=“number“时自带的上下箭头
.editInput { &::v-deep { input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; } input[type='number'] { -moz-appearance: textfield !important; } }}【注】.editInput是input父盒.
2021-11-15 13:53:29
443
原创 设置eslint代码格式
1.安装ESLint2.修改settings.json文件点击 文件 -> 首选项 -> 设置搜索 settings 将以下代码加入 settings.json文件中{ "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix...
2021-11-12 15:48:52
949
原创 判断页面是在手机端还是移动端
// 如果是移动端转跳到 https://www.baidu.com/// 如果是pc端转跳到 https://www.163.com/// window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "https://www.163.com/";let str = /Android|webOS|iPhone|iPod|B.
2021-11-12 15:12:38
2209
原创 vue---深度修改样式
scss .parent { &::v-deep { .children1 { 样式 } .children2 { 样式 } ....... }}
2021-11-10 09:11:23
984
原创 注册自定义指令---自动聚焦
directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.querySelector('input').focus() } } }
2021-11-09 11:26:40
142
原创 js操作url
获取指定的url参数 // 获取url地址 let url = location.href // 需要截取的参数位置 let index = url.indexOf('?') // 截取参数 let query = url.substring(index).substr(1).split('&&') // 存放参数 let obj = {} // 将截取的参数转换成对象形式 query.forEach(item=>{ let a
2021-09-20 15:05:36
394
原创 把字符串转换成千位符
let str = '1000001234'let arr = str.split('').reverse()let newArr = []arr.forEach((item,index)=>{ newArr.push(item) if((index+1)%3===0&&arr[index+1]){ newArr.push(',') } })newArr = newArr.reverse().join('')console.log(.
2021-09-19 21:03:21
189
原创 this指向
this首先，this指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁，实际上this最终指向的是它的调用者实例1： function a(){ console.log('test') // test console.log('this',this) } a()输出效果：对于一般的函数，它的this都指向window。因为创建的普通函数，实际上都只是在给window添加一个属性。所以他...
2021-09-18 16:00:07
82
原创 字符串的转换
将zs-ni-hao 转换成zsNiHao 格式let str = 'zs-ni-hao'// 将字符串切割为数组let arr = str.split('-') // ["zs", "ni", "hao"]// 将数组中的字符转换成需要的格式arr = arr.map((item,index)=>{ if(index!==0){ // charAt()获取字符串的首字母 toUpperCase()将字符串转换成大写字符 substring(1)获...
2021-09-18 12:52:29
124
原创 数组排序
1.sort函数 【注】sort函数是将数组中的每一项，都先转成字符(使用 toString() 方法)，然后再把字符转换成对应的ASCII值，最后按照ASCII值得大小进行比较 let arr = [15, 8, 25, 3] arr.sort() console.log(arr) // [15, 25, 3, 8]由于 ‘15’ 的ascii 值为 49 ， ‘8’ -- 56， ‘25’ -- 50， ‘3’ -- 51根据ASCII值比较 '15'...
2021-09-17 20:58:33
165
原创 随机数组
随机生成一个数组长度，并让数组里的元素也随机生成function randomNmu(n) { // 返回一个 [0,n-1]的随机数 return Math.floor(Math.random()*n)}// 数组随机的长度在 0-9之间let length =randomNmu(10)let arr = []for(let i=0;i<length;i++){ // 数组元素随机在 0- 9之间 arr.push(randomNmu(10))}
2021-09-16 11:02:30
68
原创 数组去重
数组1.数组的去重 思路1. 定义一个新数组，使用forEach遍历原数组，将原数组中的每一项与新数组中的所有元素进行对比，具体可以使用 includes 方法，如果不存在，则插入新数组 let arr = [2,5,8,1,4,7,9,2,4,5,9,0,1,4,6,2,3,7,9] let newArr = [] arr.forEach(item=>{ if(!newArr.includes(item)){ ...
2021-09-15 16:23:33
78
原创 Vue3.0基础
生命周期函数 setup 创建实例前 onBeforeMount 挂载DOM前 onMounted 挂载DOM后 onBeforeUpdate 更新组件前 onUpdated 更新组件后 onBeforeUnmount 卸载销毁前 onUnmounted 卸载销毁后 vue3.0发生的变化 去掉了beforeCreate和created汉化，添加了setup函数同一个生命周期可以触发多次定义数据<...
2021-09-11 18:25:30
361
原创 Vue组件的注册
注册局部组件// 定义局部组件的格式import xxxx from 'xxxxx.vue'export default { components: { xxxx }}缺点：每次在不同组件中使用该组件都需要重复以上代码，会造成代码冗余component注册全局组件// 定义全局组件的格式import 组件对象 from 'xxxxx.vue'Vue.component('组件名', 组件对象) 缺点：如果需要注册多个全局组...
2021-08-21 16:28:00
83
原创 vue Router
目录2.vue router之间的传参 1.$router.push2.<router-link> 3.设置路由匹配时，使用冒号设置 vue router是vue官方的路由管理器。路由用于设置访问路径，并且将路径和组件映射起来。 路由模块的本质就是建立url和组件之间的映射。2.vue router之间的传参 1.$router.push...
2021-08-19 20:42:32
146
2
原创 小知识
1.滑动到某个标签位置（js）标签.scrollIntoView( { //固定写法，滑动时的动画 behavior: 'smooth' })2.通过正则给匹配的字符添加样式//str是要进行匹配的整个字符串，tarStr是要进行匹配的关键字fn(str,tarStr) { //让reg变成关键字进行正则匹配,ig表示对str进行全局且部分大小写的匹配 const reg = new RegExp(tarSt
2021-08-17 09:30:47
123
原创 数组转树
function toTree(arr) { // newArr用于存放转化成的树 let newArr = [] // 作为数据字典，用于方便查询找到某一项的父级项 let map = {} // 制作数据字典 arr.forEach(item => { // 如果当前项没有children，就添加该属性，方便转树使用 if (!item.children) { item.children = [] } // 把当前项的ID作为.
2021-08-14 18:29:45
89
原创 修饰符 .native，v-model，.sync
.native 对于一些自定义组件，当添加事件时，该事件不会执行，因此需要使用.native 修饰符.native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。<my-com @click.native="hClick"></my-com> //my-com是自定义组件v-model 和 .syncv-model 和 .sync 都能用于实现父子组件数据之间的双向绑定 ...
2021-08-13 11:28:22
178
原创 使用svg-icon组件步骤
1.安装依赖npm i svg-sprite-loader@4.1.32.配置 vue.config.jsconst path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack(config) { // set svg-sprite-loader config.module .rule('sv..
2021-08-11 19:41:16
327
原创 同源和跨域
目录同源 1.什么是同源 2.同源策略的目的 3.同源策略带来的影响跨域 1.什么是跨域 2.解决跨域的方法 1.jsonp方式 2.cors方式 3.代理转发同源 1.什么是同源 同源是指在url中 协议，域名，端口号都相...
2021-08-08 12:14:01
55
原创 vuex的使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理数据。简言之就是用来集中管理组件中共享数据的一种状态管理模式。安装 npm i vuex -S配置 先在 vue项目的src目录下创建一个store文件，在store文件夹下在创建index.js文件 在index.js中进行配置import Vue from 'vue'import Vuex from 'vuex'vue.use(Vuex)con...
2021-08-05 18:05:10
68
原创 vue的路由使用
在 SPA (单页应用程序)项目中，不同功能之间的切换，要依赖于前端路由来完成前端路由：Hash 地址与组件之间的对应关系。安装 npm i vue-router使用创建路由模块。 在 src 源代码目录下，新建 router/index.js 路由模块import Vue from 'vue'import VueRouter from 'vue-router'import Home from '@/components/Home.vu...
2021-07-20 18:57:34
91
原创 Vue的基本使用笔记 （四）
生命周期生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。动态组件 component动态组件指的是动态切换组件的显示与隐藏。 <!-- 【注】is属性的值必须是字符串类型，Left是组件名 --> <...
2021-07-20 17:21:35
111
原创 vue中自定义配置axios实例
安装 npm i axios配置//导入axios模块import axios from 'axios'//创建一个axios实例const request = axios.create({ // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL baseURL: '基地址',})//默认导出一个函数//函数的参数是一个对象，{url,method="GET",params,data,headers}ex...
2021-07-20 11:15:42
244
原创 Vue的基本使用笔记 （三）
vue-cli 的使用 安装vue-cli：npm install -g @vue/cli在终端下运行如下的命令，创建指定名称的项目：vue cerate 项目的名称 vue 项目中 src 项目的构成assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下...
2021-07-14 11:27:37
160
原创 Vue的基本使用笔记 （二）
watch 侦听器 监视数据源的变化const vm = new Vue({ el: '#app', data: { username: '', person : { age : '' } }, watch: { // ...
2021-07-09 20:12:15
121
原创 Vue的基本使用笔记 （一）
Vue的基本使用<body> <!-- 指定vue 能够控制的Dom对象 --> <div id="app">{{username}}</div> <script src="./lib/vue-2.6.12.js"></script> <script> // 创建vue实例化对象 const vm = new Vue({
2021-07-09 10:02:47
132
原创 get,post,delete,put方法的参数提交与接收
get方法 提交的参数只能放在url后面 方式一： /xxx?属性1=值1&属性2=值2 方法二： /xxx/值1/值2【注】/xxx表示地址post方法 设置请求体提交数据 方法一：查询字符串格式 （application/x-www-form-urlencoded） 方法二：JSON格式 （application/json） 方法三：For...
2021-07-02 10:28:56
2816
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人