- 博客(31)
- 收藏
- 关注
原创 element-ui 输入框实现模糊搜索
<el-autocomplete class="inline-input" style="width: 300px" v-model="ruleForm.unifiedIdentityAccount" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false".
2021-08-12 16:48:51 1782 2
原创 2021-08-04
\数组对象中增加属性this.folderList.forEach((item, index) => { item.OnlyKey = item.id + item.lve; if (item.childRndTree != null) { item.childRndTree.forEach((item2) => { item2.OnlyKey = item2.id + item2.l
2021-08-04 15:24:35 164
原创 vue实现下载功能
//接口文件//报表网盘类型报表的下载// export const downLoadNetDiskExcel = params => {// window.open(// `/${constConfig.basePath}/submit/task/downLoadNetDiskExcel?fileName=${params.fileName}&taskId=${params.taskId}`// );// };// export function downLoa
2021-08-02 10:37:52 1125
原创 Cookie和session的区别
关于Cookie因为Web传输是通过HTTP协议,而HTTP协议是无状态协议。无状态协议即客户端是不保存什么数据的,是无记忆的。这就导致在后续操作如若需要前面用到的数据,又需要重新传输,则很影响使用的性能。所以Cookie出现了。Cookie的原理Cookie相当于服务器端发放给客户端用户的一个身份证。1.当用户第一次登陆时,服务器端返回一些数据即Cookie到客户端浏览器,接着浏览器将Cookie保存下来。而Cookie有两种存储方式:一是浏览器把Cookie存到内存中,二是保存在硬盘中。2.
2021-05-30 22:17:17 109
原创 Vue 中 this.$router 和this.$route 的区别和push()方法
通过注入路由器,我们可以在任何组件内通过 this.router访问路由器,也可以通过this.router 访问路由器,也可以通过 this.router访问路由器,也可以通过this.route 访问当前路由两者的区别为this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。his.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,
2021-05-23 23:01:17 325
原创 vue.nextTick()方法的使用详解
什么是nextTick()nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。 methods:{ testClick(){ let that=this; that.testMsg="这是修改后的值"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); }); }
2021-05-16 22:31:01 96
原创 vue路由传参的几种基本方式
1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}//路由配置{ path: '/particulars/:id', name: 'particulars', component: particulars }
2021-04-26 18:41:40 132
原创 VUE值$refs的使用
ref介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例。<p ref="p">Hello</p><children ref="children"></children>this.$re
2021-04-19 19:12:43 613
原创 JavaScript之参数传递
回忆一下Js基本的数据类型有哪些?又是如果分类的?分为两类:1.原始的数据类型primitive type,有:Undefined、Null、Bollean、Number、String。2.引用类型值,也就是对象类Object type,有:object、Array、Function、Date等。为什么会有这两种分类?这是因为声明变量时不同的内存分配:原始的数据类型:存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。它可以直接存储,是因为这些原始类型占据的空间是固定的,所以
2021-04-06 11:17:48 987
原创 css之Flex 布局
什么是Flexflex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}注
2021-03-20 18:23:31 330 1
原创 vue3.0学习(1)
虽然工作中使用的都是vue2.0但是为了以后的工作还是看了一些vue3.0。setup() 函数setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。setup 函数会在 beforeCreate 之后、created 之前执行。1.setup是一个新的组件选项,也是其他API的入口。也就是说,你所有的操作都将在setup函数内部定义和执行, Vue3.0也将用函数代替Vue2.x的类也就是new Vue()
2021-03-15 14:49:17 176 1
原创 js之DOM的节点操作
什么是节点操作页面中的所有内容都是节点(标签、属性、文本、注释等),在dom中,节点使用node来表示。HTML DOM树中的所有节点均可通过javaScript进行访问,所以HTML元素(节点)均可被修改,也可以创建或删除。一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。元素节点 nodeType为1属性节点 nodeType为2文本节点 nodeType为3(文本节点包含文字、空格、换行等)我们在实际开发中,节点操
2021-02-26 16:53:57 202 1
原创 事件三要素
事件基础js使我们有能力创建动态页面,而事件是可以被js侦测到的行为简单理为:触发–响应机制事件是由三部分组成 事件源 时间类型 事件处理程序 我们也称为事件三要素执行事件的步骤点击div控制台输出 我被选中1.获取事件源 2.绑定事件 注册事件<script>//点击按钮弹出对话框 //事件是由三部分组成 事件源 时间类型 事件处理程序 我们也称为事件三要素 //1. 事件源 事件被触发的对象 谁? 按钮 var btn = do
2021-01-30 18:58:50 1382 1
原创 js之文档对象模型
DOM什么是DOM?文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。① 对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的DOM编程接口。② 对于HTML,DOM使得HTML形成一棵DOM树,包括文档、元素、节点。我们获取过来的DOM元素是一个对象(object
2021-01-30 18:56:18 113
原创 js之简单数据类型和复杂数据类型
简单数据类型简单数据类型又叫做基本数据类型或者值类型,复杂类型又叫做 引用类型;值类型:简单数据类型/基本数据类型,在存储时变量中存储的是本身,因此叫做值类型简单数据类型:String number boolean undefined null特殊的null引用类型(复杂)复杂数组类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型通过new 关键字创建的对象(系统对象,自定义对象),如Object,Array,Date等栈:简单的数据类型存放到栈里面 存放的是值堆:复杂
2021-01-30 18:51:46 261
原创 element-ui之DateTimePicker 日期时间选择器
遇到一个需求,需要两个日期时间选择器,之间进行交互。起始日期:当前系统日期之前的日期不能选择。结束日期:大于起始时间,且结束之前的日期可选。限制某一时段无法选择引入DateTimePicker 日期时间选择器 <el-date-picker v-model="start_time" type="datetime" placeholder="选择起始日期" :picker-options="start_Date" format="yy
2021-01-16 21:33:49 3085
原创 element-ui之Checkbox 多选框
需求:下载功能要展示所有的下载字段,用户根据需要使用多选框选中后提交,并完成下载。这里 我使用了element-ui的Checkbox 多选框1.引用Checkbox 多选框<el-checkbox-group sortable="cistom"> <el-checkbox v-for="tag in downloadDisplay" //遍历展示下载字段 :label="tag.id" :key="tag.id"
2021-01-16 18:39:59 3984
原创 element-ui 中el-select 加 tree树形控件组合使用
项目中要求一个下拉框里面的选项可以拆叠。在element-ui官网里找了两个组件很符合我的需求。关键是怎么把他们组合在一起。下面是我从网上查到的方法。<el-select v-model="mineStatus" placeholder="请选择" multiple @change="selectChange" style="width:30%;"> <el-option :value="mineStatusValue" style="height: auto">
2021-01-04 19:26:53 3588 2
原创 vue学习——分享最近写的一些调用接口的方法
工作了一段时间,用vue写了一些方法这里总结一下:1、删除的方法 //批量删除 batchDeleted() { let _self = this; //获取选中表格行 let selectData = _self.$refs.multipleTable.selection; //判断是否选上 if (!selectData || selectData.length < 1) { _self.$message.er
2020-12-27 22:13:06 546 1
原创 vue+element-ui实现demo
1、什么是element-uielement-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库。2、使用前的准备1、安装webpack 命令:cnpm install webpack -g2、安装vue/vue-cli 命令cnpm install vue vue-cli -g3、初始化vue
2020-12-21 10:16:41 7325 2
原创 Vue的生命周期
生命周期介绍Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。简单说就是一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期。vue生命周期有什么作用它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。beforeCreate(创建前)介绍:实例初始化之后,组件被创建时,这时候 el,data,message 都是 underfined
2020-12-13 21:52:37 268 1
原创 vue-router学习(2)
一、vue-router配置子路由实际生活中的应用界面其实更加复杂,通常由多层嵌套的组件组合而成。比如;H1页面和H2页面嵌套在主页中1.首先用标签增加了两个新的导航链接<router-link :to="{name:'HelloWorld'}">主页</router-link><router-link :to="{name:'H1'}">H1页面</router-link><router-link :to="{name:'H2'}">H
2020-12-06 16:30:43 286 3
原创 Vue学习之vue-router
一、什么是vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。二、vue-router的使用方式1:下载 npm i vue-router -S这一步在我们在创建v
2020-12-06 16:24:02 421 3
原创 axios基础
什么是axiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios的特性特性:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFaxiso的安装使用 npm: npm install axios使用 bower: bower install axios使用 cd
2020-11-29 22:34:14 204 2
原创 vue基础之vue的常用指令
1.vue指令的使用前提el挂载点作用:el是用来设置Vue实例挂载(管理)的元素几个疑问:Vue实例的作用范围是什么呢?Vue会管理el选项命中的元素及其内部的后代元素是否可以使用其他的选择器?可以,但是实际开发时选择id选择器是否可以设置其他的dom元素?可以,但是只能支持双标签(闭合标签),而且还不能使用在HTML和body上{{message}} <h1 id="app" class="app"> {{message}}
2020-11-29 22:23:58 462 2
原创 创建一个vue项目
什么是vuevue就是一个js库,并且无依赖别的js库,跟jquery差不多。vue的核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。下面开始创建一个vue项目第一步npm的安装在https://nodejs.org/en/download/网站中下载,下载后(傻瓜式)安装安装界面(一直点Next即可)安装完场后 打开控制命令程序 输入 “cmd”。进入界面输入“node -v”和“npm -v”检查
2020-11-21 22:40:05 209 1
原创 javascript的基础学习
JavaScript书写位置写在行内<input type="button" value="按钮" onclick="alert('Hello World')" />写在script标签中:由包含的代码就是JavaScript代码,他将直接被浏览器执行。<script>alert('Hello,world!');</script>写入外部js文件中,在页面引入。把代码放在单独的文件中更有利于维护代码,并且多个页面可以引用同一个js文件。<scri
2020-11-13 21:10:24 121
原创 JavaScript学习博客
JavaScript的简介:getElementById() 是多个 JavaScript HTML 方法之一。JavaScript 是属于 HTML 和 Web 的编程语言。JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。JavaScript 是 web 开发者必学的三种语言之一:HTML 定义网页的内容CSS 规定网页的布局JavaScript 对网页行为进行编程JS组成JS组成:ECMAScript(JS的核心)、DOM(文档对象模型)、BOM(浏览器对象模
2020-11-13 20:30:25 452
原创 HashMap的使用方法
介绍::HashMap底层是哈希表 key不可以重复,Value可以重复。key对应的记录无序。1、添加方法/定义一个map集合 Map<String,String> bookMap = new HashMap<String, String>(); //往Map集合中添加数据 put方法 返回值是此key的上一个旧值 String v1 = bookMap.put("1","西游记"); bookMap.put("
2020-10-31 21:13:01 150 2
原创 mysql 分页查询
Map集合:是双列型,存放数据无序,key不可以重复,Value可以重复首先定义一个map集合://定义一个map集合 Map<String,String> bookMap = new HashMap<String, String>();添加数据//往Map集合中添加数据 put方法 String v1 = bookMap.put("1","西游记");//返回值是此key对应的上一个旧值 bookMap.put("2","
2020-10-31 18:32:49 246 1
原创 集合的添加、遍历、删除
一、集合值的添加首先定义一个ArrayList集合:定义好数组后通过add添加值。```javapublic class Demo { public static void main(String[] args) { ArrayList aList = new ArrayList();//定义数组 aList.add("好");//添加数值 aList.add(1); aList.add(2); aList.a
2020-10-31 17:48:17 414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人