- 博客(107)
- 收藏
- 关注
RSS订阅原创 vue el-dialog
<el-dialog title="Change Passward" :visible.sync="editDialogFormVisible" width="30%" :append-to-body="true" :close-on-click-modal="false"> <el-form ref="changePassward" :model="changePass...
2021-09-22 16:25:47
638
原创 vue vue-pdf、pdfobject 展示pdf
npm install --save vue-pdf<template> <div v-show="fileType === 'pdf'" class="pdf"> <p class="arrow"> <span :class="{grey: currentPage==1}" class="turn" @click="changePdfPage(0)">Preview </span>
2021-08-14 13:34:22
1017
1
原创 vue el-dropdown图片
<el-dropdown> <span> <img style="margin-left: 10px;" src="../assets/images/point.png" alt=""> <!-- <i class="el-icon-arrow-down el-icon--right" style="line-height: 50px;"></i> --> </span>
2021-08-14 11:26:12
567
原创 vue el-input 自定义样式
<div class="search"> <el-input v-model="inputSearch" clearable size="small" placeholder="Please enter serial number or product code" prefix-icon="el-icon-search" class="searchBox left" /></div>::v-deep .search .el-input{ position
2021-08-14 10:36:05
2144
原创 vue el-button样式自定义
按钮的三种状态/* 更改elememt-ui地固定样式 *//*按钮的背景颜色样式*/.el-button--primary { background-color: rgb(247, 146, 146) !important;}/*鼠标经过*/.el-button--primary:hover { background-color: rgb(178, 253, 144) !important;}/*鼠标按下*/.el-button--primary:focus { backgr
2021-08-14 10:07:22
5511
原创 el- progress自定义样式
默认样式：我想要的效果：进度条的宽度自定义颜色自定义底色自定义百分比样式自定义官方属性：比较常用的就是：text-inside 控制百分比在进度条里（只有是type=line时有效）stroke-width：进度条宽度<el-progress style="width: 100%;" class="el-progress__text" :stroke-width="20" :percentage="ylUsage" />...
2021-08-14 09:39:53
5312
原创 vue el-table的常用操作
1.去掉最下面的那一条线.el-table::before { height: 0;}2.表格去掉背景颜色变透明.el-table,.el-table__expanded-cell { background-color: transparent !important;}.el-table th,.el-table tr,.el-table td { background-color: transparent !important;}/* 最外层透明 */:
2021-06-28 14:25:30
6124
原创 DataV在vue cli上的安装和自定义修改样式
<dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
2021-06-28 14:23:42
6225
5
原创 CSS justify-content 属性
CSS justify-content 属性在弹性盒对象的 元素中的各项周围留有空白：div{ display: flex; justify-content: space-around;}
2021-06-26 15:37:38
199
原创 使用Gitee将vsCode项目上传到仓库中
1. 创建登录码云账号（账号密码邮箱能截图的都截图保存收藏！以后忘记了可以直接看）2. 添加SSH公钥鼠标移动到右上角头像-点击设置打开SHH公钥生成公钥win+R,cmd按如下命令来生成 sshkey（替换为自己的邮箱账号）ssh-keygen -t rsa -C "[email protected]" 在文件夹中找到此红框文件，任意打开方式打开pub文件，复制全部内容黏贴到公钥中，（也可以修改名字）点击确定再次进行权限验证，输入密码点击确定，公钥
2021-05-20 16:27:49
458
原创 vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
点击——>阿里巴巴矢量图标库官网登录将图片添加入库购物车中查看，添加至项目下载至本地，解压文件夹文件夹中含有以下文件将此文件夹重命名并放入项目文件-src-assets文件夹中在main.js中导入图标库的css文件import './assets/yonghu/iconfont.css'复制图标名字，使用element-ui插入prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
2021-05-18 16:51:05
798
1
原创 使用 VebView2，在C#WinForm中显示前端效果，做到C#与js通讯
VebView2控件的使用下载Microsoft Edge Can新建winForm窗体项目点击项目->管理NuGet程序包->浏览（WebView2）->安装在窗体中添加TextBox（addressBar）,Button(goButton),VebView2(webView)更改webView控件的source属性,设置默认路径url:https://blog.csdn.net/Yueqin0512给按钮添加点击事件在Form1.cs
2021-04-17 14:52:08
5814
3
原创 React 元素渲染 组件定义的两种方式
元素渲染当前时间<div id="example"></div><script type="text/babel"> function tick() { const element = ( <div> <h2>{new Date().toLocaleDateString()}.</h2> <h2>{new Date().toLocaleSt
2021-01-26 13:51:14
258
原创 React JSX简介
JSX，一种 JavaScript 的语法扩展,JSX 就是用来声明 React 当中的元素<style> .foo{ color: red; }</style><body> <div id="root"></div> <script type="text/babel"></script> const element = <h1 className="foo">Hello Wor.
2021-01-26 09:28:21
127
原创 搭建React 开发环境
新建文件夹，在此目录下运行cmd使用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.orgcreate-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6cnpm inst.
2021-01-25 13:35:24
107
原创 Vue lic 基于Tomcat在花生壳上的发布
运行环境vue lic 4.5.10vue 2.6.12apache-tomcat-9.0.41jre1.8.0_281安装可以安装在D盘1. Download and Install a Java SE Runtime Environment (JRE)点击安装Java2. Download and Install Apache Tomcat点击安装Tomcat3. Configure Environment Variables安装两个环境变量此电脑—>属性—>
2021-01-23 11:07:58
261
1
原创 vue Element-UI的使用
Element-UI：是一套为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库官方网址：https://element.eleme.cn/#/zh-CN/component/installation
2021-01-12 10:14:37
140
原创 基于vue，结合el-button的vue-router配置
文章目录1.安装路由2.创建路由配置文件3.定义路由组件4.配置路由规则并创建路由实例，导出5.添加路由链接 添加路由填充位6.运行 查看效果1.安装路由在终端运行npm install vue-router --save2.创建路由配置文件在main.js文件夹下添加以下代码//添加路由import router from './router'new Vue({ router, render: h => h(App)}).$mount('#app')用图形化方式创建的v
2021-01-12 08:53:26
1656
原创 vue lic 展示当前时间(js写成组件，dayjs插件)
效果展示在vue lic 的components文件夹下，新建组件CurrentTime.vue直接上组件代码：<template> <div> {{ nowDate + ' ' + nowTime + ' ' + nowWeek }} </div></template><script>export default { name: 'CurrentTime', data() { ret
2021-01-09 16:41:51
221
原创 vue lic Echarts的插入及基于ASP.NET Core3.1 signalR实现前后端分离式数据传输
文章目录在vue中插入Echarts基于ASP.NET Core3.1 signalR实现前后端分离后端代码：前端配置1.用图形化方式创建的脚手架项目中，在依赖中添加添加`@microsoft/signalr`2. 用以下代码创建hub.js3. 配置`BarChart.vue`在vue中插入Echarts获取echarts用图形化方式创建的脚手架项目，在依赖中添加echarts 4.9.0或者 通过npm 获取echarts：npm install echarts --save安装完后，在项
2020-12-26 15:18:30
574
1
原创 C# Linq查询 取出指定的控件对应顺序插入数据
所有textBox的命名为t1-t6 需要在tableLayOutPanel中取出所有的textBox控件,然后从plc中读取连续的寄存器，一一对应插入textBoxprivate void button8_Click(object sender, EventArgs e) { //取出一组数据 OperateResult<float[]> result1 = busTcpClient.ReadFloat("0", 6); if (result1 == .
2020-12-19 15:16:41
277
1
原创 C#ModBus Tcp读写数据
引用-添加引用-HslCommunication.dllModBus组件所有的功能类都在 HslCommunication.ModBus命名空间，所以再使用之前先添加using HslCommunication.ModBus;using HslCommunication;在使用读写功能之前必须先进行实例化：private ModbusTcpNet busTcpClient = new ModbusTcpNet("192.168.3.45", 502, 0x01); // 站..
2020-12-19 14:18:47
10079
5
原创 Vue CLI基于图形化方式创建Vue项目
文章目录npm换源成淘宝镜像图形化方式创建Vue项目基于图形化界面的方式，创建Vue项目Vue脚手架生成的项目结构分析Vue脚手架的自定式配置1.（不推荐）通过package.json配置项目2.（推荐）通过单独的配置文件配置项目npm换源成淘宝镜像由于node下载第三方依赖包是从国外服务器下载，虽然没有被墙，但是下载的速度是非常的缓慢且有可能会出现异常。在创建项目之前，建议把npm的镜像源替换成淘宝的镜像源打开默认的npm（win+r），输入以下代码npm install -g cnpm --
2020-12-07 15:27:50
348
原创 webpack的基本使用以及在项目中的安装和配置
webpack的概述webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。提供了良好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化，提高开发效率和项目的可维护性webpack的基本使用(创建列表隔行变色项目为例)新建项目文件夹，（项目名称不能为webpack，且不能含有大写字母！！！！），例如mybackpage在项目空白目录下，运行npm init -y 命令，初始化包管理配置文件package.json空目录下新添加了packag
2020-12-07 11:50:44
183
原创 ES6模块化的基本语法
文章目录1.默认导出和默认导入2.按需导出和按需导入直接导入并执行模块代码1.默认导出和默认导入默认导出：export default默认导出成员m1.js:let a = 10;let c = 20;let d = 30;function show(){ console.log("111111");}export default { a,c,show}默认导入：import 接收名称 from “模块标识符”index.js:import m1 from '
2020-12-04 09:20:46
245
1
原创 Node.js中通过babel体验ES6模块化
文章目录1.创建项目文件夹打开cmd窗口2.初始化项目3.安装依赖模块4.在项目的跟目录中创建文件并进行配置5.在根目录中创建`index.js`6.执行代码1.创建项目文件夹桌面——新建文件夹——取名为babel-study打开cmd窗口双击打开文件夹，将路径改为cmd2.初始化项目npm init -y得到3.安装依赖模块npm i -D @babel/core @babel/cli @babel/preset-env @babel/node这里需要等待，待安装完成文件夹
2020-12-02 14:23:22
486
原创 API前后端交互模式
文章目录URL地址格式1. 传统形式的URL2. Restful形式的URLPromise1. Promise概述2. Promise基本用法3. Promise常用的APIfetch1. 请求参数（1）methods(String):Http请求方法，默认为GET（2）body(String):HTTP的请求参数（3）header(Object):HTTP的请求头，默认为{}2. 参数传递（1）get请求方式的参数传递（1）delete请求方式的参数传递（1）post请求方式的参数传递（2）put请求方式
2020-12-01 20:39:45
1592
原创 Vue路由的基本概念与原理，Vue-router的使用
文章目录1. 路由的基本概念与原理路由的本质（1）后端路由（2）SPA（3）前端路由2. 路由的使用（1）Vue-router的基本使用（2）路由重定向（默认路径）（3）Vue-router的嵌套路由`children`（4）Vue-router的动态路由匹配（5）路由组件传递参数props①props的值为布尔类型②props的值为对象类型③props的值为函数类型（6）Vue-router的命名路由（7）Vue-router的编程式导航1. 路由的基本概念与原理路由的本质 路由的本质就是对应关系
2020-11-28 16:28:54
410
原创 Vue渲染函数
节点、树以及虚拟 DOM1. 浏览器的工作原理<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>上述 HTML 对应的 DOM 节点树如下图所示：每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。2
2020-11-26 16:47:48
797
原创 Vue自定义指令
自定义指令简介1.自动聚焦输入框自定义指令&&全局————不带参数<div id="app"> <input type="text" v-focus></div><script> Vue.directive('focus', { inserted: function(el){ el.focus() } }); var vm = new Vu
2020-11-26 14:29:44
116
原创 Vue混入
混入基础一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项<script> var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } var Component =
2020-11-26 13:40:02
99
原创 Vue边界处理情况
一.访问根实例$rootVue 子组件可以通过 $root 属性访问父组件实例的属性和方法写入根组件的数据<div id="app"> {{msg}} <root-obj></root-obj> </div> <script> Vue.component("root-obj",{ data () { return { } }, templ
2020-11-26 11:55:56
203
原创 Vue组件简易模拟购物车练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></scr.
2020-11-20 20:33:19
254
原创 Vue组件化开发
组件注册1 全局组件注册语法Vue.component("button-counter", { data: function(){ return{ count: 0 } }, template: "<button @click='handle'>点击了{{count}}次</button>", methods:{ handle:function(){ this.count+=2; } }});var
2020-11-18 16:33:17
156
原创 Vue数组响应式变化
1.变异方法（修改原有数据,会影响原有数组数据）都会被Vue处理成响应式的方式，只要调用这些方法，都会影响到页面中模板内容的变化this.list.push(this.fname)push()数组末尾添加一个或多个元素pop()删除数组的最后一个元素shit()删除数组的第一个元素unshit()向数组开头添加一个或多个元素splice()删除数组中指定元素sort()对数组中的元素进行排序reverse()反转数组，颠倒顺序2.替换数组（生成新的数组，不会对原数组产生影响）调用完
2020-11-18 10:08:35
599
1
原创 Vue生命周期
1. 主要阶段挂载（初始化相关属性）（1）baforeCreate在实例初始化之后，数据观测和事件配置之前被调用（2）created在实例创建完成后立即被调用（3）beforeMount在挂载之前被调用*（4）mountedel被新创建的wm.$el替换，并挂载到实例上去之后调用该钩子更新（元素或组件的变更操作）（1）beforeUpdate数据更新时调用，发生在虚拟Dom打补丁之前（2）updated由于数据更改导致的虚拟Dom重新渲染和打补丁，在这之后会调用该钩子销毁（销毁
2020-11-18 08:21:31
101
原创 Vue过滤器的使用(格式化日期)
过滤器的作用格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等自定义过滤器Vue.filter("lower",function(val){ return val.charAt(0).toLowerCase() + val.slice(1)})过滤器的使用级联操作<div>{{msg | upper}}</div><div>{{msg | upper | lower}}</div>属性绑定<div :abc
2020-11-17 16:26:08
438
原创 Vue侦听器的用法即应用场景
侦听器的应用场景数据变化时执行异步或开销较大的数据侦听器的用法<body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model="firstName"> </span> </div> <d
2020-11-17 15:19:47
898
原创 Vue 计算属性 computed
一：Vue计算属性1.为何需要计算属性？表达式 的计算逻辑可能比较复杂，使用计算属性可以使模板内容更加简洁2.计算属性的用法computed: { reverseString: function(){ //基于data中的数据来做处理 return this.msg.split('').reverse().join(''); }}直接调用<div>{{reverseString}}</div>计算属性与方法的区别计算属性是基于他们的依赖进行
2020-11-17 14:27:11
105
转载 新版vs code + Vue高亮、语法自动补全插件
vs code 版本或及以上1.安装以下三个插件插件VeturESLintPrettier2.左下角设置3.进行配置旧版配置：{ "editor.fontSize": 20, "window.zoomLevel": 1, "workbench.iconTheme": "ayu", "files.autoSaveDelay": 500, "files.autoGuessEncoding": true, "files.autoSave": "a
2020-11-17 09:53:40
22149
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人