- 博客(82)
- 收藏
- 关注
RSS订阅原创 vue 项目内vue指令常用
ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用获取组件上ref获取标签上ref代码是工程组件化components-config.jspersonal-auth-form.vue
2022-10-21 11:01:56
639
1
原创 日记 2022-5-4（vue技术图片64）
自身夯实：登录功能：iview/element ui 表单校验，验证登录，flex布局 ， vuex信息获取与存储，样式穿透<Form action ref="formInline" :model="formInline" :rules="ruleInline"> <FormItem prop="ID"> <Input type="text" v-model="formInline.ID" placeholder="账号"> <img src="../
2022-05-04 17:26:57
1409
原创 在Linux环境下 nginx 部署vue打包项目
nginx常用命令：在Nginx sbin目录下 cd /www/server/nginx/sbin./nginx 启动./nginx -s reload 重启./nginx -s stop 停止配置文件：nginx.confuser www www;worker_processes auto;error_log /www/wwwlogs/nginx_error.log crit;pid /www/server/nginx/logs/nginx
2022-04-29 14:01:58
3056
原创 初始vue3 心得
一个简单的管理系统前提：vue3vitevuexvue-routerelement-plusi18n待加入md5echartsdocker地图已完成登录页面首页装备页面别人家吊打本家页面，模仿，准备把面包屑导航学习一下，欧耶！！！具体页面代码后续根据页面图像跳转补上（此页面只做展示）...
2022-03-01 11:39:42
684
原创 vue3 + i18n
安装npm install vue-i18nyarn add vue-i18nmain.js如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import router from './
2022-02-21 10:07:11
4953
1
原创 初识(typescript)--ts //模块，命名空间，装饰器，例子（类，接口）
模块export（类，接口，变量，函数） ：导出声明 default（默认）import：导入命名空间namespace ： 定义一块私有的空间，恰好与export相反，外部看不到内部细节装饰器在类的上面@装饰器名称 ： 不改变原有的类，动态扩展类的属性和方法function logclass (info : any){ console.log(info) info.prototype.apiurl = 'localhost:8080'}@logclassclass
2022-01-19 11:47:35
422
原创 初识(typescript)--ts //接口
接口：可用作约束多个对象,数组，函数关键字：interface//可选参数,对象的约束 interface peopleName{ fristName? : string, lastName? : string,} // 定义多个方法function teacher(name:peopleName) : void{ console.log(`语文老师叫： ${name.fristName} ${name.lastName}`);}function so
2022-01-17 13:58:56
472
原创 初识(typescript)--ts //多态，抽象
多态属于继承，是继承的一种延续在父类内部有一个公用方法，但是不知道具体做什么，由多个子类继承同一个方法，实现不同效果这个公用方法也叫方法的重写class Animall{ name:string; constructor(name:string){ this.name = name } eat():void{ }}class Dog extends Animall{ constructor(name : string){
2022-01-12 11:18:45
374
原创 初始(Javascript/Typescript) --ts/js 实例方法与静态方法
实例方法 与 静态方法js// 实例方法function Person(){ this.name = '张飞' run(){ return `${this.name}在救关羽` }}// 静态方法Person.work = function(){ //静态方法直接调用 return `${this.name}在保护刘备`}let A1 = new Person() //实例方法需要new一下tsclass Person{
2022-01-12 10:30:54
239
原创 初识(Typescript) -- ts //类，继承
定义类 class Person{ name:string; age:number; constructor(n:string , age :number){ this.name = n this.age = age } getName():string{ return this.name } setName(na
2022-01-12 10:01:16
459
原创 初识(Javascript) -- js //继承
对象冒充实现继承function Person(){ this.name = '张三' ; this.age = 18 this.run = () =>{ alert(`我叫 ${this.name} `) }}Person.prototype.sex = '男'Person.prototype.work = ()=>{console.log('我在工作')}function PersonTo (){ Person.c
2022-01-11 16:17:04
132
原创 初识(typescript) -- ts //函数
函数: 声明函数 function run() :String { return '23' }: 匿名函数var run = function() :string{ return 'q2'} : 函数带参数 function run(A:string , B :number):string{ return `{A} -- {B}` }: 匿名函数带参let run =function (A:string , B :number):string{
2022-01-10 09:37:42
472
原创 初识(typescript) -- ts
下载安装/编译npm install -g typescriptcnpm install -g typescriptyarn global add typescript在控制台输入 tsc -v 可以看到版本号，则安装成功现阶段浏览器不支持ts语言需要转译为js在当前项目控制台输入 tsc – init 初始化生成tsconfig.json文件，在此配置文件’outDir’:’/.js’ ，将ts文件转到js文件项目内导航栏终端 》 运行任务 》 typescr.
2022-01-07 17:05:14
596
原创 uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 ：globalStyle 内 navigationStyle": "custom"配置页面：pages.json"globalStyle": { "mp-alipay": { /* 支付宝小程序特有相关 */ "transparentTitle": "always", "allowsBounceVertical": "NO" }, "navigationBarBackgroundColor": "#0081ff", "navigationBarTitl
2021-12-25 17:14:29
2095
原创 uni-app 上传图片样式
/* ================== 初始化 ==================== */body { background-color: #f1f1f1; font-size: 28upx; color: #333333; font-family: Helvetica Neue, Helvetica, sans-serif;}view,scroll-view,swiper,button,input,textarea,label,navigator,
2021-12-24 15:33:09
662
原创 uniapp 上传图片（封装）
<template> <view class="margin-top"> <view class="cu-bar bg-white "> <view class="action"> {{label}} </view> <view class="action"> {{imgList.length}}/{{maxImg}} </view> </view> <
2021-12-24 15:30:22
885
原创 短信验证码倒计时（获取短信是后端返回验证码）
需求：点击获取验证码按钮后开始计时，秒数为0结束<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view> <input class="uni-input" p
2021-12-24 10:11:21
272
原创 计算属性computed使用
计算属性：当计算属性内绑定的值改变了，内部set会自动计算改变的值（想当与这里的phoneNo）当手机号输入超过4位数字即显示获取验证码的按钮，否则禁用<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <view class="title"><text class="cuIcon-mobile margin-right-xs"></
2021-12-23 16:26:55
524
原创 上传文件fetch,post
<el-upload action="#" :http-request="FJ_Upload" :limit="3" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> </el-upload&...
2021-12-15 11:13:54
2756
原创 前端 使用 md5加密 token uuid
安装md5包:npm install js-md5 -s快速配置import md5 from 'js-md5'Vue.prototype.$md5 = md5使用this.$md5('需要加密的内容')实例data() { return { user_account: "", userpwd: "", radio: "user", }; }, methods: { // 登录 submit() {
2021-11-30 10:10:52
1204
原创 键盘点击事件 vue iview ui
KeyDown：按键下去触发事件KeyPress：按键不松持续事件 用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、 SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符KeyUp： 松开键盘事件<textarea v-model="messageContent" class="te
2021-11-30 09:37:50
265
原创 vue iview 创建群聊组件
<!-- 添加 弹窗 --> <Modal v-model="ifaddSearchPop" draggable sticky scrollable @on-cancel="cancelInfo" @on-ok="addGroup" :mask="false" width="400" title="新建群聊" > <div class=...
2021-11-24 16:51:06
580
原创 element 日期选择器 禁用日期时段
<el-form-item label="还款时间"> <el-date-picker v-model="Form.start_time" type="date" value-format="yyyy-MM-dd" placeholder="起始日期时间" :picker-options="pickSelectStart" ></el-date-.
2021-11-22 16:01:11
1499
原创 niginx,前端反向代理
listen 9999; server_name location; index index.html index.htm index.php; root /home/financial_management_vs/dist; location /api { rewrite ^.+api/?(.*)$ /$1 break; include uwsgi_params; proxy_p.
2021-11-17 09:48:16
1605
原创 微信小程序--cascaser，联机选择器
用的是uview组件库HTML<view class="contract-type"> <label style="margin-left: 5rpx;">参与者</label> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-db " @click="selectShows = t...
2021-10-18 11:45:12
797
原创 Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
解决问题网址将 main.js中的引用 import echarts from ‘echarts’ 改为 import * as echarts from 'echarts’
2021-10-08 16:55:01
89
原创 一维数组与二维数组的转换
一维数组转二维数组// 表单数据 loadFormData() { look_DB_detail({ to_do_id: sessionStorage.getItem('to_do_id') }).then(res => { this.detail_Form = res.data.data[0]; this.uploadForm.before_state_id = res.data.data[0].to_do_state ? res.data.data[0].
2021-09-24 17:27:38
548
原创 promise async与await 宏/微任务
promise作用，在宏任务假死情况下的异步操作promise(resolve,reject)参数一是返回成功，参数二是返回失败promise().then().then().then()链式操作解决了地狱回调(操作复杂，且不容易改变逻辑代码)getpromise(num) { return new Promise((resolve, reject) => { if (num > 1) { return resolve; } else
2021-08-19 17:23:55
247
原创 vue3路由特性
1.创建实例变化的方式history代替了mode选项history:createWebHistory(),hash:createWebHashHistory(),abstract:createMemoryHistory(),都移至createWebHistory等方法中2.移除了通配符 *routes:[ { path:'*', }]//代替方式//pathMatch名称自定义//(.*)正则表达式表示 所有//最后一个*是必填项而且是重复的routes:[ {
2021-08-18 17:40:24
226
原创 vue3搭建项目
vscode：终端vue create one-piece选择3，中间你要选择scss,es6什么的根据自己的喜好看到8080,就成功了然后安装 vite 和 Naive UI（现在仅仅支持vue3,vue2的话选择element UI）Naive UIelement UIvitenpm init @vitejs/app搭建路由下载 vue-routernpm i [email protected]使用naive UI 组件的效果图.
2021-08-18 15:13:23
61
原创 Windows nginx + rtmp 流媒体服务器搭建（uniapp可用）
准备：所有文件目录请不要中文命名，请使用英文nginx服务 官网下载niginx服务 视频推流版3. 配置文件 nginx-rtmp-module4. 推流文件 ffmpeg5. 拉流工具 vlc步骤：一，下载好nginx视频版，解压，在nginx 1.7.11.3 Gryphon目录下新建三个文件夹：m3u8Filerecvod二，将nginx-rtmp-module 下载好丢进去（上图有）三，在conf目录下，新建一个文件“nginx.conf”worker
2021-07-28 10:52:10
1451
3
原创 vue使用 echarts
下载：1.npm/yarnnpm install echarts --saveyarn add echarts --save配置mian.js// 引入echartsimport echarts from 'echarts' //配置原型链上Vue.prototype.$echarts = echarts2.在局部引用import * as echarts from 'echarts';案例,用的是局部引用html<div id="aaa" style="wi
2021-07-07 17:35:14
212
原创 electron-vue 创建弹窗
方法一：window.open("https://www.baidu.com");即可打开弹窗方法二：js//引入const {BrowserWindow} = window.require('electron').remote;//functioncreatBrowser(){ var newWin = new BrowserWindow({ width:500, height:500, web
2021-07-05 14:56:43
1039
原创 img图片src的引入
场景在普通适合可以引用本地的图片路径，但是循环使用就可能遇到问题普通使用<img src="../../image/creatHY.png" alt="">本次使用环境是vue，在循环中使用html<div class="body-box"> <div class="img-item" v-for="(item,index) in imgList" :key="index"> <img :src="item.
2021-07-02 14:16:45
2436
原创 electron-vue创建项目
创建vue项目vue create electronvue创建vue 项目完成，启动安装elecrotron-builder依赖vue add elecrtron-builder启动项目：npm run electron:serve构建项目：npm run electron:build打包的时候，先打包好Vue，放在dist_electron/bundled目录下；接下来需要从github上下载对应的electron资源，可能有点耗时，有可能因为网络超时失败，顺利的话在dist_electro
2021-06-28 17:54:43
267
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人