![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端集合
文章平均质量分 73
前端相关内容
全栈若城
曾就职容猫,四维等大厂,涉猎大前端,python, 鸿蒙等领域技术。阿里云, CSDN技术社区专家博主,CSDN博客专家Top100, 热衷技术分享
展开
-
jquery利用雅虎YQL 做中间层进行跨域请求
废话不多说直接上代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> ul li{ list-style: no原创 2018-12-27 18:22:11 · 1059 阅读 · 3 评论 -
使用YQL解决跨域请求json转jsonp问题
一、跨域报错首先,是跨域请求的问题,jQuery默认不支持跨域请求,报错如下:index.html:1 XMLHttpRequest cannot load http://www.weather.com.cn/data/sk/101280601.html. No 'Access-Control-Allow-Origin' header is present on the requeste...原创 2018-12-27 18:25:38 · 510 阅读 · 0 评论 -
webpack + vuecli多页面打包基于(vue-template-admin)修改
遇见的问题TypeError: Cannot read property ‘tap’ of undefined先看项目目录结构 :关于项目的修改及改造 再项目完事的时候会发布的如果你也遇见这个问题的话 这一篇博客应该完全可以解决问题描述:building for sit environment...D:\EVDownload\adminMPA\node_modules\script-ext-html-webpack-plugin\lib\plugin.js:50 compilati原创 2020-11-10 12:19:44 · 2560 阅读 · 6 评论 -
02-vue源码分析之 vue3.0为何弃用Object.defineProperty而选择Proxy
前言在3.0中 双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty,那么我们来看一下Proxy对比defineProperty优势在哪首先这两种都是基于数据劫持实现的双向绑定什么是数据劫持当访问或者设置对象的属性的时候,触发相应的函数,并且返回或者设置属性的值。vue通过Object.defineProperty来劫持对象属性的getter和setter操作,当数据发生变化时发出通知。const data= { name: '若城', sex:原创 2021-03-17 15:50:43 · 304 阅读 · 0 评论 -
vue面试提整理偏原理
前言:本来是想扯会淡在进入正题的 ,但是考虑到时间紧迫 , 就不说那些有的没的了 , 感觉文章有帮助点个赞 ,给个评论就ok1.什么是MVVM ?MVVM是 Model-View-ViewModel 缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。2. 简单说一下原创 2021-05-19 15:19:14 · 248 阅读 · 0 评论 -
electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)
目前网上有好多关于electron相关的文章,但是本人在开发的时候发现,网上大部分文章可以说是千篇一律,没有真正的痛点解析啥的很无语 ,好多的问题都需要自己去找、去试,这无异于加大了开发成本与学习成本,所以本篇博客会从electron 的api 到 electron +vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明, 当然在最后的文末我会将我写的 electron + vue全家桶的git开源项目附上,需要的话就去git 吧...原创 2020-12-01 10:57:58 · 1354 阅读 · 0 评论 -
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
Object.defineProperty() 是啥?假设我们有个对象user ,我们要给他增加一个name属性 , 我们怎么做 ? var user = {}; user.name = "若城" console.log(user)如果要增加一个方法呢 ? user.sayHi=function(){ console.log('hi') } console.log(user)Object.defineProperty() 就是做这个事情的如原创 2021-03-17 15:49:38 · 199 阅读 · 0 评论 -
vscode 在不同设备上共用自己的配置
vscode 在不同设备上共用自己的配置介绍code settings sync:是专门用来同步vacode配置到Gitee中的插件,通过这个插件,可以在任何新的设备,新的平台同步自己的配置,快速的构建自己熟悉的IDE环境(vsdoe也许不能称为IDE,但作为文本编辑器功能又太强大了),目前主流通过Settings Sync将配置同步到Github,但是速度太慢,详细教程可以百度,这里只介绍同步配置到Gitee的操作使用在插件库寻找下载code settings sync在Gitee原创 2021-05-18 16:03:29 · 546 阅读 · 1 评论 -
js面向对象理解
ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。js(如果没有作特殊说明,本文中的js仅包含ES5以内的内容)本身是没有class类型的,但是每个函数都有一个prototype属性...原创 2019-12-14 11:16:12 · 143 阅读 · 0 评论 -
webpack中的一些基本操作(VUE)
1.全局安装webpacknpm i webpack -g2.在开发的文件下初始化npm init -y3 安装webpack-dev-servernpm i webpack-dev-server -D4 在跟目录创建文件 webpack.config.js里面编写 var path = require("path"); module.exports = { en...原创 2020-03-21 08:45:03 · 268 阅读 · 0 评论 -
android回传值
页面一如下: 页面二如下: 逻辑描述在页面二实现代码如下 :1.创建一个User类:如下:package com.ycp.intentforback;import java.io.Serializable;public class User implements Serializable { String name; Str...原创 2019-03-14 16:13:14 · 476 阅读 · 0 评论 -
windows 10常用快捷键 win10常用快捷键
电脑键盘方法1 Win键+Tab:激活任务视图 Win键+A:激活操作中心 Win键+D:显示桌面,再按一下恢复之前样子。 Win键+E:打开文件管理器 Win键+G:打开Xbox游戏录制工具栏,供用户录制游戏视频或截屏 2 Win键+H:激活Windows 10应用的分享功能 Win键+I:打开Windows 10设置 Win键+K:激活无线显示器连接...原创 2019-02-12 08:51:53 · 3270 阅读 · 0 评论 -
JavaScript】基本数据类型与引用数据类型区别(及为什么String、Boolean、Number基本数据类型会有属性和方法?)
基本数据类型 JavaScript基本数据类型包括:undefined、null、number、boolean、string。基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值。1)基本数据类型的值是不可变的任何方法都无法改变一个基本类型的值,比如一个字符串: var name = "change"; name.substr();//hang console.log(...原创 2019-06-11 12:02:08 · 515 阅读 · 0 评论 -
ConstraintLayout 属性详解 和Chain的使用
使用前的准备引入也有坑,无力吐槽。 先放上 截止至20170524,最新版本1.0.1:compile 'com.android.support.constraint:constraint-layout:1.0.1'坑是啥?因为我使用的是最新的release版AndroidStudio2.3.2,新建Activity后,自动帮我引入的是1.0.8-alpha版本, 开始我就这么愉快的学...原创 2019-02-15 16:07:38 · 289 阅读 · 0 评论 -
ionic 头部内容 尾部
引入 ionic 的css js 和angularJS 这三个文件头部写法<ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" n原创 2018-11-20 10:42:56 · 194 阅读 · 0 评论 -
js中特殊字符去重写法
var arr = [NaN, NaN, undefined, undefined, null, '', '', NaN, undefined, undefined, null];//判断一个数组里有没有NaNfunction chechNaNFromArr(arr) { if(!arr || arr.length == 0) return false; for(var i =...原创 2019-08-01 15:51:43 · 159 阅读 · 0 评论 -
vscode 一些基本知识
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。 vscode 作为一款逐渐火热的编辑器。它的...原创 2018-11-25 22:17:14 · 652 阅读 · 0 评论 -
关于Android中intent传值问题
页面一布局如下:实现效果:在页面一的输入文本框内输入文本,点击跳转按钮可以调到页面二,并且将输入的文本传到页面二实现传值页面一逻辑代码如下: et_text = (EditText) findViewById(R.id.et_text); //获取EditText 的id btn = (Button) findViewById(R.id.btn); ...原创 2019-03-14 15:56:06 · 528 阅读 · 0 评论 -
总结整理VsCode插件
这篇文章主要介绍了VsCode插件整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1.VsCode官方插件地址:2.使用方法,可以在官网中搜索需要的插件或者在VsCode的“”扩展“”中搜索需要的插件添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可3.常用插件说明:一、...原创 2018-11-25 21:46:32 · 524 阅读 · 0 评论 -
node中fs模块之文件操作
关于node的文件操作我们该如何处理呢?下面我整理了一下关于node的文件操作api大家可以看下1、异步读取 fs.readFile( url , code , callback);2、同步读取 fs.readFileSync( url , code );var fs = require('fs'); // 异步读取 fs.readFile('input.txt...原创 2019-11-26 09:13:25 · 554 阅读 · 0 评论 -
正则表达式中的量词
自我感觉量词是正则表达式里最不容易理解的地方,所以特别为它做了个总结。为了容易理解,会简单地结合正则表达式引擎的工作方式来讲。正则表达式引擎分为文本导向型(Text-directed Engines)和正则表达式导向型(Regex-directed Engines)两种。因为基本上采用的是正则表达式导向型的引擎,所以下文关于引擎工作方式的部分都是基于正则表达式导向型引擎的。一、没有量词时正...原创 2019-05-06 11:06:43 · 2007 阅读 · 0 评论 -
JSplumb 中文教程(前端自定义组件,流程图,拓扑图)
Arrow 一个可配置的箭头Label 标签,可以在链接上显示文字信息PlainArrow 原始类型的箭头Diamond 菱形箭头Custom 自定义类型原创 2020-03-08 09:50:36 · 8115 阅读 · 1 评论 -
jsplumb入门教程及视频教程链接
1. jsplumb 视频教程链接地址jsplumb视频教程1.1. 什么是jsplumb?你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它?用jsPlumb你可以!它是完全免费的,并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。jsplumb 其实就是一个绘制流程图 的插件 拓扑图1.1.1 d3.js : 缺点 不可操控的Dom -...原创 2020-04-07 10:37:52 · 1519 阅读 · 1 评论 -
vue websocket组件封装
目录结构如下封装代码import { Message } from 'element-ui'let websock = null// let messageCallback = null// const errorCallback = nullvar tryTime = 0let wsUrl = ''// 接收ws后端返回的数据function websocketonmessage(e, successCallback) { successCallback(JSON.parse(e原创 2021-03-10 17:45:07 · 1654 阅读 · 0 评论 -
js创建节点删除节点实例
废话不多说先上效果图 , 点击边框外的按钮对应显示在边框内, 当点击小叉叉的时候消失 ,简单的运用js的创建节点 以及删除节点先写一下css代码:.odiv { width: 300px; height: 300px; border: 1px solid #999; margin: 0 auto; } .btnGlup { /*width: 100px...原创 2018-10-08 14:22:44 · 2945 阅读 · 0 评论 -
jq精简显示(隐藏)文本
效果图: css代码 : *{ margin: 0; padding: 0; } .box{ width: 300px; height: auto; margin: 0 auto; } .box2{ border: 1px solid #999; width: 300px; float: left; } .b...原创 2018-10-09 13:27:51 · 1109 阅读 · 0 评论 -
angularJS 实现选项卡功能
先上效果图css代码比较简单不做过多解释哈*{ margin: 0; padding: 0; } .odiv{ width: 500px; height: auto; margin: 0 auto; } ul li{ list-style: none; float: left; width: 98px; heigh...原创 2018-10-11 09:33:25 · 721 阅读 · 0 评论 -
二级联动复杂版(升级版)
效果图如下 html代码如下<select id="bigCity"> <option>----请选择省份----</option> </select> <select class="city"> <option>----原创 2018-10-14 19:45:28 · 241 阅读 · 0 评论 -
jquery动画效果之回调
css代码:*{ margin: 0; padding: 0; } .box{ width: 500px; height: 300px; background: #e5e5e5; margin: 0 auto; overflow: hidden; } .word { width: 260px; height: 30...原创 2018-10-11 15:13:44 · 1373 阅读 · 0 评论 -
js书写信息添加列表
js书写信息添加列表 ; 先上效果图首先看一下css样式表 写法 .odiv{ width: 100%; height: 100px; } .odiv p{ width: 200px; float: left; height: 30px; line-height: 30px; } .odiv input{ ...原创 2018-10-08 17:02:23 · 874 阅读 · 0 评论 -
jquery的增删改查
效果图如下: css代码如下:<style> .addAll{ display: none; } </style>html代码如下: <table class="tableOne" border="1" width="100%"> <tr> <th>&a原创 2018-11-08 13:30:52 · 801 阅读 · 0 评论 -
jq书写点击换图
先上效果图: css 代码:*{ margin: 0; padding: 0; } .box{ width: 500px; height: 500px; background: #e5e5e5; margin: 0 auto; } .box div{ width: 400px; height: 300px; m...原创 2018-10-09 11:03:18 · 328 阅读 · 0 评论 -
angular电影管理
css如下: div{ width: 300px; height: ; margin: 0 auto; } div h5{ width: 300px; text-align: center; height: 30px; } div p{ width: 250px; margin: 0...原创 2018-11-16 11:58:17 · 455 阅读 · 0 评论 -
简单的二级联动效果
效果图如下 html代码 :主要是selete下拉选项<select id="bigCity"> <option>----请选择省份----</option> <option>北京</option> <option>上海</option>原创 2018-10-13 23:21:35 · 744 阅读 · 0 评论 -
angularJs购物车--(卖药)
效果图: css代码:<style> div{ width: 400px; height:300px ; background: #ccc; } div p{ width: 300px; height: 30px; margin: 0 auto; margin-top: 20px; ...原创 2018-11-16 11:57:12 · 460 阅读 · 0 评论 -
angularjs购物车功能(全)包含 (修改,添加等功能)
先上效果图:css代码较为简单 这里的css主要是为了修改模拟窗口,和添加数据模拟窗口: .shop{ width: 500px; height: 300px; background: #E5E5E5; margin: 0 auto; } .shop p{ width: 450px; height: 30px; margin: 0 auto;...原创 2018-10-19 11:15:58 · 1424 阅读 · 2 评论 -
jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)
效果图如下:html代码如下:<body> <div class="btn"> <button class="seleAll">全选</button> <button class="allDel">批量删除</button> <but原创 2018-10-18 08:30:12 · 1246 阅读 · 0 评论 -
css3 效果全(旋转,放大,倾斜,平移)
css代码如下body{ padding: 100px; } /*初始设置所有盒子大小及颜色*/ div{ width: 100px; height: 100px; background: #0f0; margin-top: 30px; /*设置过渡时间及效果*/ transition: all 5s; } .a:a...原创 2018-10-25 11:20:24 · 19322 阅读 · 0 评论 -
angular实现全选,反选,批量删除,删除,全不选,倒序,模糊查找等功能
效果图如下:html代码如下:<body ng-app="myApp" ng-controller="myCtrl"> <button ng-click="dx(seq)">倒序</button> <button ng-click="qx()">全选</button>原创 2018-10-17 16:22:01 · 837 阅读 · 0 评论 -
flex布局
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地...原创 2018-11-01 18:01:51 · 195 阅读 · 0 评论