前端技术
文章平均质量分 67
JavaScript / JQuery / Vue / ElementUI / 微信小程序
七月J
从事后端(做过前端),不断积累经验,学习新的技术。
展开
-
Vue子组件调用父组件的方法
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客原创 2021-07-22 13:40:49 · 314 阅读 · 0 评论 -
Element UI 自定义穿梭框的数据项
文章目录需求官网说明实现效果具体步骤附加需求:调节穿梭框高宽度需求官网说明实现效果具体步骤这是我们从数据库查询出来的数据,主要展示我红色框圈起来的字段。想要带分页的穿梭框可以参考:传送门…附加需求:调节穿梭框高宽度由于我们显示的字段是比较长的内容,官网提供的大小不足以满足我们需求,所以想要把穿梭框的大小变大,具体实现如下:<style scoped lang="less"> /* 穿梭框外框高宽度 */ /deep/ .el-transfer-panel{原创 2021-07-29 10:52:23 · 4678 阅读 · 2 评论 -
Vue:Axios异步通信、生命周期
什么是AxiosAxios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF(跨站请求伪造)GitHub:https://github.com/axios/axios中文文档:http:/原创 2020-08-01 16:04:30 · 518 阅读 · 0 评论 -
Vue:MVVM模式和第一个Vue程序
什么是 MVVMMVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。MVVM 源自转载 2020-07-31 21:09:44 · 483 阅读 · 0 评论 -
Element实现行合并
Element实现行合并原创 2022-10-27 17:32:26 · 1019 阅读 · 0 评论 -
Vue CLI(脚手架)
文章目录一、Vue CLI1、Vue CLI使用前提,需要安装NodeJS和Webpack2、Vue CLI的使用3、Vue CLI2详解一、Vue CLI1、Vue CLI使用前提,需要安装NodeJS和WebpackNodeJS官网下载安装:http://nodejs.cn/download安装webpack命令:npm install webpack -g检查安装的版本:node -vnpm -vwebpack -v2、Vue CLI的使用安装Vue脚手架(全局安装)np原创 2021-01-14 15:40:09 · 1228 阅读 · 0 评论 -
nrm报错 [ERR_INVALID_ARG_TYPE]
nrm 1.2.1报错:[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:122:11) at Object.join (path.js:375:7) at Object.<anonymous> (C:\Users\liyin\AppData\Roamin原创 2021-05-25 19:59:15 · 256 阅读 · 0 评论 -
vue-router 详解
文章目录1、认识vue-router2、安装和使用vue-router1、认识vue-router目前前端流行的三大框架,都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/vue-router是基于路由和组件的路由用户设定访问原创 2021-01-16 12:15:20 · 125404 阅读 · 15 评论 -
Vue:基础语法
v-bind我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!我们还可以使用v-bind来绑定元素特性!代码:<!DOCTYPE html><html xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="原创 2020-08-01 11:49:20 · 234 阅读 · 0 评论 -
Axiso解决跨域访问
首先请检查下你的 Vue 版本,Vue2 和 Vue3 跨域方式不同:$ vue -V2.X or 3.X一、Vue2 版本这里以访问 Ve2x 的一个公告API为例,直接访问如下:this.$axios.get("https://www.v2ex.com/api/site/info.json").then(res=>{ console.log(res)}).catch(err=>{ console.log(err)})当我们运行程序后,控制台报错如下:原创 2021-02-20 16:46:55 · 317 阅读 · 0 评论 -
Vue:前端体系、前后端分离
1、概述Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库(如:vue-router:跳转,vue-resource:通信,vuex:管理)或既有项目整合。官网:https://cn.vuejs.org/v2/guide/2、前端知识体系想要成为真正的“互联网 Java 全栈工程师”还有很长的一段路要走,其中“我大原创 2020-07-31 20:21:50 · 2571 阅读 · 0 评论 -
Vue:表单双绑、组件
什么是双向数据绑定Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。为什么要实现数据的双向绑定在 Vue.js 中,如果使用 vuex,实际上数据还是单向的转载 2020-08-01 13:17:42 · 286 阅读 · 0 评论 -
Element UI 树形控件整合带图标的下拉功能菜单(tree + dropdown + input)
本文主要讲述:自定义树形控件<el-tree>需求说明:Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构 如下:我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面;并且在每个文件夹前添加自定义图标。实现效果:实现步骤:1、使用插槽(slot)<el-col :span="4" :xs="24"> <!--目录搜索功能--> <div cl原创 2021-07-21 15:31:58 · 2900 阅读 · 4 评论 -
微信小程序基础
文章目录一、微信小程序介绍1、为什么是微信⼩程序2、官⽅微信⼩程序体验二、微信小程序准备工作1、注册账号2、登录小程序3、获取APPID4、开发工具三、第⼀个微信⼩程序1、打开微信开发者⼯具2、新建⼩程序项⽬3、填写项⽬信息4、成功5、微信开发者⼯具介绍四、⼩程序结构⽬录1、⼩程序⽂件结构和传统web对⽐2、基本的项⽬⽬录一、微信小程序介绍微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤1原创 2021-03-24 10:26:18 · 391 阅读 · 0 评论 -
【微信小程序常见问题】bindtap事件传参 | wx.navigateTo()传参
目的:微信小程序中某个控件的点击事件bindtap触发时如何传参举例实现:1、wxml文件这里的参数名是 item,参数值是 doubleperson 。<view class="radioBtn" bindtap="addedopertap" data-item="doubleperson">2、js文件addedopertap: function (e) { var dataList = e.currentTarget.dataset.item; consol.原创 2021-04-16 09:17:00 · 1266 阅读 · 0 评论 -
微信小程序之动态添加、删除指定view和获取input值
遇到的问题:动态的添加指定的view内容。。嗯。。很简单。。wx:for就搞定!!动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组。动态删除指定的已经添加的view内容。思路wx:for 循环view,添加一个,wx:for的内容就增加1个,那么循环的内容是用数字来循环还是数组呢?input是循环出来的,所以不可能给不同的input绑定不同的 bindInput 事件,那么只有绑定一个输入事件,而且所有的值必须是一个数组的话.转载 2021-04-14 09:53:04 · 1549 阅读 · 0 评论 -
【微信小程序组件】自定义单选(多选)切换颜色按钮组件
问题所在:在小程序开发中,官网提供的表单组件不足以满足我们的需求,所以我们需要自定义组件。这里我们以按钮为例需求:默认按钮都不选中,当点击一个按钮选中且变色,选中另一个时,上一个选中的按钮恢复之前的颜色。完成效果图:默认状态点击以后的效果一、封装通用组件1、jsComponent({ /** * 单选按钮组组件 */ properties: { // 按钮内容数组 buttonList: { type: Array, .原创 2021-04-28 17:55:56 · 3029 阅读 · 0 评论 -
JavaScript:操作 BOM 和 DOM
浏览器说明由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的。目前主流的浏览器分这么几种:IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差。从IE10开始支持ES6标准;Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaScript引擎——V8。由于Chrome一经安装就时刻保持自升级,所以不用管它的版本,最新版早就支持ES6了;Safari:Apple的Mac系统自带的基于Webki原创 2020-07-28 10:23:12 · 296 阅读 · 0 评论 -
Ajax的使用
1.简介AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。Google Suggest 使用原创 2020-07-28 10:16:32 · 351 阅读 · 0 评论 -
JSON的使用 | Jackson | FastJson
JSON什么是JSON?JSON(JavaScript Object Notation, NS对象标记)是一种轻量级的数据交换格式,目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。在JavaScript语言中,一切都是对象。因此,任何JavaScript 支持的类型都可以通过JSON来表示,例如字符串、数字、对象、数组等。看看他的要求和语法格式:原创 2020-07-27 15:32:04 · 489 阅读 · 0 评论 -
滑块验证码实现
前言滑块验证码也是生活中常见的,本文会介绍如何实现以及原理。如果对验证码实现感兴趣的可以看这篇文章:验证码实现 - html页面版如果对验证码实现感兴趣的可以看这篇文章:验证码实现 - 工具类调用版代码实现滑块验证码主要用到几个属性:clientX,screenX,pageX,offsetX。代码的解释在注释中已经写的很清楚了,如有更好的实现方式欢迎留言。<%@ page contentType="text/html;charset=UTF-8" language="java" %&g原创 2020-07-03 12:39:19 · 4524 阅读 · 0 评论 -
验证码实现 - 工具类调用版
前言图片验证码是我们日常经常用到的,本文将介绍如何实现以及其原理,以注册页面为例实现功能。如果对滑块验证码感兴趣的可以看这篇文章:滑块验证码实现及原理如果对验证码实现感兴趣的可以看这篇文章:验证码实现 - html页面版代码实现代码的解释在注释中已经写的很清楚了,如有更好的实现方式欢迎留言。ValidateCode工具类package cn.qd.utils;import javax.imageio.ImageIO;import javax.servlet.ServletOutputS原创 2020-07-03 12:38:59 · 1243 阅读 · 0 评论 -
验证码实现 - html页面版
前言图片验证码是我们日常经常用到的,本文将介绍如何实现以及其原理,并没有过多注重css样式,单纯实现验证码功能。如果对滑块验证码感兴趣的可以看这篇文章:滑块验证码实现及原理如果对验证码实现感兴趣的可以看这篇文章:验证码实现 - 工具类调用版代码实现主要是利用canvas画布加上随机字母,以及适当的旋转,移动,颜色。这一块主要利用的是css3的内容。代码的解释在注释中已经写的很清楚了,如有更好的实现方式欢迎留言。<%@ page contentType="text/html;charse原创 2020-07-03 12:37:48 · 16372 阅读 · 4 评论 -
使用JS实现表单验证
目录表单页面展示FormCheck.jspCSS样式Register.cssJavaScript代码FormCheck.js以注册页面为例实现表单验证功能。表单页面展示FormCheck.jsp<!DOCTYPE html>< html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面表单校验</title> <link rel="st原创 2020-07-02 13:23:17 · 18467 阅读 · 10 评论