- 博客(59)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue 2在初始化的时候做了什么
3.初始化渲染函数是指，初始化渲染相关的属性和方法，比如$createElement,用于后续的DOM渲染。2.初始化事件是指，设置父组件在模版中绑定的事件监听器，确保子组件能够触发父组件的方法。1.初始化生命周期是指，设置组件的父子关系定义生命周期的相关属性。4.执行beforeCreate钩子函数。6.初始化状态，顺序就是这个顺序。8.执行created钩子函数。
2023-12-27 11:50:04
434
原创 解决element ui tree组件不产生横向滚动条
在css里面这样写,样式穿透按自己使用的css编译器以及框架要求就好。需要在tree的外层，包一个父组件。
2023-12-02 11:05:12
740
原创 js设计模式
单例模式的核心思想是通过限制类的实例化次数，保证运行时只有一个实例存在，这有助于避免资源浪费、减少内存消耗，同时也使得实例的状态在应用中保持一致，例如vuex就可以看做单例模式的实现，new Store(),全局都访问这个store。当你订阅一个 YouTube 频道，每当该频道上传新视频时，你会收到通知，这就是一个生活中的观察者模式的例子。：这是你带来的插座转换器，它的作用是将国际标准插座的接口转换为你电子设备所需的接口类型。：这是国际标准的插座，它的接口与你的电子设备的接口不兼容。
2023-08-12 14:55:34
923
原创 mock.js mock规则
Random.boolean( min?, max?, current? )返回一个随机布尔值 返回一个随机的自然数（大于等于0的正数，默认范围0-9007199254740992，min最小值，max最大值）返回一个随机整数[-9007199254740992 , 9007199254740992]返回一个随机的浮点数min整数部分的最小值 默认-9007199254740992max整数部分的最大值 默认9007199254740992dmin 小数部分位数的最小值 默认0dmax小数部分小数位数的
2022-11-19 11:33:41
504
1
原创 olcesium 在2d添加Draw交互画出的面，没有边框线
需要在添加图层后设置 vectorLayer.set('altitudeMode', 'clampToGround');
2022-08-06 14:49:31
395
1
原创 vue使用Canvas
2.样式区（style区） canvas实际上是一个内联元素，要设置它在页面水平居中，需要把它设置为块级元素，（再次声明，不可以在css里设置canvas的宽高）3.脚本区(script区) （1）获得canvas两个的区别就是，用ref找到的canvas使用时需要使用canvas.value, 而document.querySelector找到的canvas使用时不需要加.value（3）画线（两
2022-07-14 11:38:09
10832
2
原创 在vite初始化的项目中安装scss，及scss的使用
（2）在src/assets文件夹下新建 style文件夹(文件名可以自定义)，在文件夹下新建main.scss文件 （3）在vite.config.js中配置2.scss的简单使用 (1)变量的定义 例如：$blue: #3385ff $表示这是一个变量；blue表示这个变量的名称；#3385ff代表这个变量的值 在HelloWorld.vue文件的style区
2022-07-01 15:24:06
11521
2
原创 vue3 setup函数中引用本地文件
1. impo xyz from '../xxx/xxx/xxx'在使用的时候直接使用 xyz 代替地址2.把需要引用的文件放到 public 文件夹下，就可以直接引用了
2022-06-27 11:51:21
624
1
原创 前端使用vue-clipboard2实现复制功能
需求由于项目都是动态生成的，所以每个复制按钮要复制的内容也不一样， vue-clipboard2支持编程式复制，可以不修改html，所以采用vue-clipboard21.npm安装2.在main.js引入3.在页面中使用
2022-06-01 17:15:57
678
原创 在beforeRouteEnter中不能使用this的解决办法
在beforeRouteEnter中不能使用this的原因可以理解为，还没有进入组件，所以找不到this,但是可以使用下面的方法访问，做一个next的回调，传入vm，vm就是组件实例，用vm代替this比如 this.$router.replace就替换为vm.$router.replace就可以使用了beforeRouteEnter(to, from, next) { next(vm => { if (vm.$store.state.isSelectedPro) {
2022-05-26 15:21:40
3116
1
原创 vue使用$set
在vue2中，由于实现响应式数据，使用的是 Object.defineProperty() 这个是给已经存在的属性设置getter和setter，不能监听深层的变化，所以新增和修改要使用this.$set来设置数据，实现响应式在vue3中，实现响应式数据使用的Proxy代理，这个可以监听深层的变化，所以就没有必要再使用$set...
2022-05-05 10:56:40
846
原创 TypeScript 数据类型，以及定义方法
1.数据类型布尔型：boolean数值型：number字符型：string数组：array对象：object元组（可以定义数组有几个成员）：tuple枚举：enum任意性（少用，赋值的时候会影响被赋值的元素）：any未知型(比any优秀)：unknown空型：void 不存在的类型（常用来抛出...
2022-04-27 14:21:52
1584
原创 vue3使用ref和reactive定义数据
首先需要先从vue解构import {reactive, ref } from "vue";定义数据let state = reactive({ //使用reactive定义数据，需要写成对象的格式 global: [],});let test = ref([]); //使用ref定义数据，直接定义即可let testObj = ref({});数据赋值// 获取所有商品 productAll().then(res => { state
2022-04-26 15:31:38
6029
原创 微信小程序，uniapp去掉按钮的边框
<button class="share" > <div class="iconfont icon-fenxiang"></div> <div>分享</div></button>.share::after{ border: none; //去掉边框}.share{ padding:0; margin:0}
2022-04-09 15:22:06
1615
原创 在uniapp中使用组件，需要传递额外的参数
理解例如这个复选框是用switch做的，当switch状态改变的时候，我需要把对应的vuex里的数据的选中状态也改变，因为购物车的数据必定是一个数组，所以我想要修改里边某一个元素的一个变量的值的时候，我需要得到我点的那个的索引值但是由于这个switch组件它<switchtype="checkbox" checked="true" @change="switchChange(index)" />这个change事件里就带一个event,如果这样传index...
2022-04-09 15:16:07
1400
原创 微信小程序常用API
1.调接口 wx.request2.页面跳转 wx.navigateTo({})3.创建视频前后关系 wx.createVideoContext('video的id')4.创建音频的前后关系 wx.createInnerAudioContext() || wx.getBackgroundAudioManager()5.设置本地存储 wx.setStorageSync('名',值)6.读取本地存储 wx.getStorageSync('名').........
2022-03-24 17:21:58
5974
原创 微信小程序调接口的封装
wx.request({url: // 指定接口地址method: // 指定接口提交方式：post、getdata: // 指定接口参数headers: // 指定请求头数据success:res=>{}, // 调取接口成功的回调函数fail:err=>{}, // 调取接口失败的回调函数complate:()=>{} // 调取接口完成的回调函数})...
2022-03-19 17:48:51
469
原创 微信小程序音频
1.获取音频组件 let ac=wx.createInnerAudioContext() 设置了title才能播放2.获取背景音频组件 let am= wx.getBackgroundAudioManager() 设置了title会自动播放音频播放需要同时设置两个属性am.src am.titlemusic.src可以在确定了音乐的id后立刻生成：music.src=`https://music.163.com/song/media/outer/url?id=${music...
2022-03-12 09:59:06
3081
原创 微信小程序在组件中实现watch功能
在Component组件中如何实现侦听属性： （1）如何创建组件：components\spinner\新建Component （2）在使用组件的页面的json文件中： { "usingComponents":{ "组件名":"组件的路径" "spinner":"../../components/spinner/spinner" } .
2022-03-08 08:11:44
1186
原创 原生微信小程序实现watch功能
// 做一个watch watch:{ count(newValue,oldValue){ //监听代码 } },//生命周期函数 onLoad: function (options) { //存一下this指向，以便在watch里使用 that=this //调用app.js里的方法 getApp().setWatch(thi...
2022-03-06 18:01:47
581
原创 日期拾取器获得的时间，把他们分开
//this.dateData.dateValue=2022-2-21 let reg=/(?<year>\d{4})[/-](?<month>\d{1,2})[/-](?<day>\d{1,2})/; let year,month,day this.dateData.dateValue.replace(reg,function(result,sub1,sub2,sub3,index,input,groups){ y..
2022-02-21 15:40:33
54
原创 管理系统二级权限管理代码
<template> <div class="secondaryPermission"> <!-- 标题 --> <page-title title="二级权限管理"> 您可以在此处进行二级权限的管理 </page-title> <!-- 新增二级权限按钮 --> <el-row class="addSecondary"> <el-col>.
2022-02-15 15:36:03
411
原创 管理系统新增修改，共用一个对话框，区分点的是哪个
给他们绑定一个共同的方法，如showDialog,然后给他们传一个字符串，用来区分点的是哪个，新增可能用不到sc，但是修改会用到sc，所以还需要传一个sc，以便在修改中。引用sc.row, sc.$index <el-button @click="showDialog('insert')">新增</el-button> <el-button @click="showDialog('modify',sc)">修改</el-button>..
2022-02-15 15:31:03
284
1
原创 管理系统点了修改再点新增，对话框内容不清空问题
1、新增数据/修改数据的弹窗是同一个弹窗，内置同一个表单： 问题：修改数据的弹窗中表单如何显示数据。 利用Object.assign()方法为表单绑定的变量设置数据： this.frmPermissionData=Object.assign({},调取接口查询出来的当前数据) 注意：不能直接赋值（this.frmPermissionData=调取接口查询出来的当前数据），因为直接赋值属于数据的浅拷贝，必须使用能够实现首层深度拷贝的赋值技术（Object.assign...
2022-02-15 15:24:57
551
原创 在路由中使用axios
在src\router\index.js文件中如何使用Axios import axios from 'axios' axios.get(url,data).then(res=>{})在src\router\index.js文件中如何调用vueximport store from '../store'访问vuex数据源：store.state.userInfo.permission...
2022-02-10 17:42:09
458
原创 element ui el-menu组件
1.组件需要先写在<el-menu></el-menu>里面2.一点此单就能显示东西或进入路由的就用<el-menu-item></el-menu-item>实现3.点了展开下一级菜单的要写在<el-submenu><template slot=‘title’>标题文本</template><el-menu-item></el-menu-item></el-subme
2022-02-10 17:40:54
3387
原创 token的工作原理
1、用户登录时向服务器提供“身份鉴权信息”（登录账号、密码）。2、服务器去数据库用户表中验证身份鉴权信息。 （1）通过验证：向浏览器发放token令牌及令牌有效期。 （2）未通过验证：返回提示语，禁止登录。3、前端将令牌及令牌有效期（甚至可以是整个用户信息）存储至vuex和Storage本地存储中。4、一旦登录成功，为vuex添加一个记录有效期时间戳的分量： expiresTime:new Date().getTime() + payload.expires...
2022-02-09 20:16:04
946
原创 使用反向代理解决跨域问题
在项目根目录下新建一个webpack的配置文件：vue.config.js。跨域问题的解决必须在vue.config.js文件中进行配置书写。代码内容如下 module.exports={ devServer:{ // 配置项目的启动服务器 open:true, // 设置是否自动打开浏览器 host:'0.0.0.0', // 设置启动服务器的主机名 port:9000, // 设置启动服务器的端口号 hotOnly:t
2022-02-09 20:14:42
573
原创 新vue项目应该有的操作部署axios和element-ui
1、使用vue-cli创建项目（vue-router、vuex）。2、部署axios。在终端输入 npm install axios --save-dev在项目的main.js文件中导入Axios并将其部署在Vue实例的 原型下：// 全局加载Axiosimport axios from 'axios'Vue.prototype.$axios=axios;// 全局加载qsimport qs from 'qs'Vue.prototype.$qs=qs;3、部署Element
2022-02-09 20:12:32
240
原创 element表格的增删改查
<template> <div class="home"> <h1>表格数据增删改查</h1> <hr> <el-dialog :visible.sync="isShow"> <template slot="title" v-if="isAdd"> <i class="el-icon-user"></i>新增学生信息 </te.
2022-01-24 10:43:38
846
原创 vuex的数据在刷新后无法得到保存
vuex的数据在刷新后无法得到保存在App.vue中书写下列代码：借助本地存储技术来实现vuex中数据源的存储于读取。window.localStorage：本地存储中的永久性存储机制。window.sessionStorage：本地存储中的会话性存储机制。（1）确定本案例选择sessionStorage来进行本地存储。（2）确定本地存储的变量名为store。1、刷新：window的unload保存数据。2、页面打开时应该读取数据。...
2022-01-17 08:22:45
594
原创 封装echarts图表
//对象的合并 objectMerge(source,destination){ for(let key in destination){ if(source.hasOwnProperty(key)){ // 重复属性的解决方案 if(destination[key].constructor===Array){ source[key]=[{...source[key][0],...destination[..
2022-01-17 08:17:47
444
原创 再次封装axios
import Vue from 'vue'import axios from 'axios'import qs from 'qs'Vue.prototype.request= ({url,type='get',data={},headers={},options={},success,fail=null,complate=null})=>{ if(type.toLowerCase()==='get'){ data={ params:data .
2022-01-17 08:14:11
223
原创 在单行文字中拉伸对齐
因为手机号和密码字数不一样，不设置的话，会默认左对齐，不美观，解决方法为<span class="text">手机号</span><span class="text">密码</span><span class="text">验证码</span>.text{ width:50px;height:inherit; line-height: 60px; text-align: justify; float:..
2022-01-14 15:12:00
99
vue devtools
2022-05-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人