前端学习笔记
文章平均质量分 51
Zack_ZXY
Learning to code is rarely as easy as people make it out to be but it's also rarely as difficult as it seems in the depths of your despair.
展开
-
scope样式穿透
首发于我的博客(http://zhengxiyun.top)有这样一种情境:1、因为某些特殊的原因我不希望注册一个全局组件,而且不想新增一个文件作为组件,只能在当前页面中注册局部组件2、在局部组件中,该组件又是一个富样式的组件3、所以我希望在当前页面中,穿透部分scope,使当前页面的一些样式可以应用于局部组件中1.单纯css的样式穿透...原创 2019-12-04 22:32:20 · 916 阅读 · 0 评论 -
vue2 onresize实现浏览器窗口大小实时计算
首发于我的博客(http://zhengxiyun.top) mounted(){ window.onresize = () => { return (() => { this.divHeight = window.innerHeight - yourHeight })(); ...原创 2019-12-04 22:24:22 · 814 阅读 · 0 评论 -
vue2 过滤器的定义及传参及调用
首发于我的个人博客1、定义全局定义import*asfiltersfrom'./filters'局部定义filters:{timestampToTime:function(value,type){vardate=newDate(value)varY...原创 2019-12-04 21:36:46 · 288 阅读 · 0 评论 -
TypeScript学习笔记四 理解类的代码
官网教程:https://www.tslang.cn/docs/handbook/classes.html 理解类的代码: class Animal{ name:string private fierce:number constructor(animal:string,fierce=0){ this.name = animal ...原创 2019-01-23 18:48:19 · 188 阅读 · 1 评论 -
bpmn.js 简介
(注:英语渣渣,以下内容机翻加人工整理,翻译的不好,望请谅解。)bpmn.js是一个渲染工具包及web建模器。用来在浏览器中创建、嵌入和扩展BPMN图表。可以独立使用也可以集成到你的应用中。 一、模型使用“基于web的模型组件”(web-based modeling component)可以很简单的创建属于你自己的BPMN2.0图表二、流程图的嵌入和注释使用工具包将BPMN2....翻译 2019-01-03 11:24:24 · 5374 阅读 · 0 评论 -
bpmn-js起步
通过本文逐步熟悉bpmn-js。 快速介绍:bpmn.js是一个BPMN2.0渲染工具包和web建模器。使用JavaScript编写,在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图。这使得它很容易的嵌入到任何web应用中。 这个库既可以是web查看器也可以是web建模器。使用查看器将BPMN2.0流程图嵌入到你的应用中并可以使用数据丰富你的流程图。使用建模...翻译 2019-01-04 16:47:45 · 32781 阅读 · 2 评论 -
vue前端模糊搜索高亮的一种实现
最终效果是这样的: 思路是:1、写一个方法过滤每一组字符串,需要高亮的加高亮的class2、过滤器方法返回 html字符串3、通过v-html将返回作为HTML标签解析后输出过滤器代码:export function highLightTableMsg(msg, highLightStr) { if (msg == null) { msg = '' }...原创 2018-12-29 16:01:32 · 4370 阅读 · 2 评论 -
vue Element UI树的手动点击选中(非checkbox选中)
element数形组件提供手动checkbox选中 有时候我们希望,手动设置树上的选中样式,类似于这种: 直接上源码:// 手动点击选中树节点(非checkbox选中)export function manualClickChecked(theTree, manualNode, alwaysExpand) { var store = theTree.store ...原创 2018-12-29 15:40:42 · 4873 阅读 · 1 评论 -
Vuescroll在IE浏览器下滚动条中的内容展示不全
具体的样子是这样的:在IE下可以看到,在IE下表格的右边有一部分被遮盖住了。与之对比,在谷歌浏览器下:这个原因是由于这段样式导致的:在谷歌浏览器下:在IE浏览器下:解决思路就是:判断是IE浏览器的时候,加增加一段css <vue-scroll :style="ieStyle"></vue-scroll> ...原创 2018-12-12 11:54:57 · 2195 阅读 · 0 评论 -
Element表格内嵌套表单,表单input回车跳转页面
导致这个问题是因为回车时提交了表单,阻止表单提交问题就解决了。方法一:在表单内写一个type为hidden的input标签方法二:在<el-form>标签内写上@submit.native.prevent...原创 2018-12-14 20:07:06 · 1071 阅读 · 0 评论 -
Vue+webpack+Echart Echart富文本图片找不到 404
echart富文本里可以放图片,具体这样写: rich: { Disconnect: { height: 30, align: 'left', backgroundColor: { image: '../../a...原创 2018-12-19 15:46:37 · 645 阅读 · 3 评论 -
table表格中数据点击,数据上移,数据下移功能
其实就是两条数据互换位置,上移就是当前条跟上一条互换位置,下移就是当前条和下一条互换位置。 // table数据上移export function moveUpTable(tableData, index) { if (index === 0) { // 数据已经置顶 } else { tableData.splice(index - 1, 1, ...tabl...原创 2018-11-28 16:09:32 · 1949 阅读 · 1 评论 -
TypeScript学习笔记五 理解类的代码 public、private、protected、static及存取器
官网地址:https://www.tslang.cn/docs/handbook/classes.htmlpublic 公共的private 私有的protected 受保护的 class Animal{ public size:string = "small" protected name:string private fierce:number...原创 2019-01-24 12:36:01 · 9513 阅读 · 2 评论 -
最新淘宝镜像安装node-sass方法及淘宝镜像的安装,删除
不建议所有的包都从淘宝镜像上安装。node-sass嘛,你懂的,有的时候要是实在装不上了,也没得办法了。要么翻墙,要么淘宝镜像了要么去GitHub上下载文件?再手动安装?要是你就装不上了,也别费这个劲了,多半也是下不下来的。呵呵~~~ 下载方法:下载地址:https://github.com/sass/node-sass/releases设置变量:set SASS_BIN...原创 2019-01-24 19:10:51 · 11664 阅读 · 0 评论 -
Vue页面跳转传参
首发于我的博客(www.zhengxiyun.top)1、新开窗口{%codeblock[lang:javascript]%}letrouteData=this.$router.resolve({path:"/test/aaaaa",query:{'param1':'','param...原创 2019-09-11 22:01:44 · 222 阅读 · 0 评论 -
2019最新vscode1.36.1 设置控制台清空快捷键
首发于个人博客网站(https://zhengxiyun.top)1、File-》Preferences-》Keyboard Shortcuts2、输入框输入workbench.action.terminal.clear3、双击该条目4、弹出框内ctrl+k,回车保存...原创 2019-07-16 22:20:35 · 3957 阅读 · 0 评论 -
webpack深入浅出 第一章 示例源码 1.3.3 示例源码 CommonJS项目的Webpack构建
首发于我的博客(https://www.zhengxiyun.top),欢迎访问!### 1、Webpack版本"webpack": "^4.35.3","webpack-cli": "^3.3.5","webpack-serve": "^3.1.0"### 2、源码地址https://github.com/CapernaumZheng/studyCode/tree...原创 2019-07-11 00:26:50 · 131 阅读 · 0 评论 -
Angular项目 配置webpack alias 路径别名
转载文章,若有侵权,请联系删除。转自: https://majing.io/posts/10000018711176作者:devgirlAngular cli内部是基于webpack实现构建项目:默认是没有webpack的配置文件webpack.config.js。 部分与webpack相关的配置可以在.angular-ci.json中设置。 如果需要定制的webpack.co...转载 2019-02-20 16:57:53 · 2043 阅读 · 0 评论 -
TypeScript学习笔记四 接口 类类型
接口除了可以描述变量,描述函数,还可以描述类interface Animals{ name: string size: string setName(animalName:string) setSize(animalSize: string) getName():string}class Mammal implements Animals{ ...原创 2019-01-23 16:59:21 · 157 阅读 · 0 评论 -
TypeScript学习笔记三 接口 可索引的类型
官方教程:https://www.tslang.cn/docs/handbook/interfaces.html 用来描述可以通过索引得到值的类型。interface StringArray { [index: number]: string;}let myArray: StringArray;myArray = ["Bob", "Fred"];let myStr: ...原创 2019-01-23 12:56:19 · 1899 阅读 · 0 评论 -
TypeScript学习笔记一 基础类型
TypeScript:不介绍了,可以认为是一门基于JavaScript的编程语言。(ts会被编译成js文件)环境配置:1、安装最新的node2、打开命令行窗口,运行以下语句:npm install -g typescript 新建一个.ts文件在命令行窗口运行:tsc 文件名.ts这个ts文件就会在同级目录下生成一个同名的.js文件。 学习笔记一:...原创 2019-01-22 15:03:10 · 217 阅读 · 0 评论 -
TypeScript学习笔记二 接口
学习教程:https://www.w3cschool.cn/typescript/typescript-interfaces.html比如我写一段程序,打印出名字function printPerson(person:{name:string}){ console.log(person.name)}let xiaozhang = {name: "张三",age:18,fro...原创 2019-01-22 17:16:41 · 189 阅读 · 0 评论 -
IE浏览器兼容问题,date获取类型获取年、月、日为NaN
time 为字符串,为传过来的日期字符串,转为date类型var date = new Date(Date.parse(time.replace(/-/g, '/')))原创 2018-11-28 11:50:11 · 2416 阅读 · 1 评论 -
npm install报错:MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”
报错信息:以管理员身份运行dos键入以下命令回车:npm install --global --production windows-build-tools 等待安装结束重新npm install如果node-sass还报错。手动运行一下npm install node-sass再npm install ...原创 2018-11-30 17:12:12 · 5859 阅读 · 2 评论 -
小白Sass教程---通过实例学Sass--第三讲--后代选择器嵌套
我们在css中定义子样式时,要从父节点一层一层的向内寻找,代码会很长,而且会有重复的代码。比如:.lesson2 div table{ border: 1px solid #ccc;}.lesson2 div table thead tr{background-color:#ebebeb;}.lesson2 div table tobdy tr{background-color:#e2202...原创 2018-07-13 18:56:14 · 4069 阅读 · 0 评论 -
小白Sass教程---通过实例学Sass--第二讲--变量
1、变量声明:$声明一个sass变量$highlight-color: #F90;2、变量使用span{ color : $highlight-color //给span标签定义颜色}3、作用域:{}块内声明,作用域在块内在最外面,作用域为全局4、如果全局变量和局部变量重名会怎样?会应用块内的变量。如果块内有定义该变量,优先用块内的变量,如果块内没有定义,使用全局变量5、变量可以嵌...原创 2018-07-13 18:54:18 · 156 阅读 · 0 评论 -
小白Sass教程---通过实例学Sass--第一讲--实例环境搭建
我们不考虑Sass是怎么被编译成css的,也不考虑Sass怎么安装,我们通过构建工具或者脚手架快速搭建一个可编译Sass的平台。通过实例来学习Sass的用法。环境:Windows7工具:WebStorm、Node、Vue-cli、Webpack不需要任何webpack、Node、Vue的知识,我们只当这些东西是一个工具。下面开始1、安装node(下载,下一步)2、打开命令行窗口,全局安装webpa...原创 2018-07-13 18:52:35 · 912 阅读 · 0 评论 -
npm run build之后生成的dist如何扔到服务器运行(npm run build之后如何本地运行)
运行npm run build之后,会生成一个dist文件夹,里面的目录结构大概是这样的:生成完的文件我们怎么来运行呢?直接在本地打开inde.html是无法运行的,打包的时候有提示:构建文件应该通过HTTP服务器提供服务。所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器,下面用Apache Tomcat和Nginx为例,分别运行一下。一、Apche Tomcat1、下载Apch...原创 2018-07-13 13:17:52 · 100274 阅读 · 4 评论 -
node-sass 安装失败 Failed at the [email protected] postinstall script.
控制台运行npm install时报错,报错信息如下:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] pos...原创 2018-07-13 09:31:24 · 48188 阅读 · 6 评论 -
freemarker学习#1
Freemarker学习笔记原创 2016-04-14 16:08:20 · 3860 阅读 · 0 评论 -
Freemarker学习#2
Freemarker类型: 支持的类型有: 标量:字符串、数字、布尔值、日期 容器:哈希表、序列、集 子程序:方法和函数、用户自定义指令 其他:节点 解释一下 容器 中 集 是一个什么概念:从模板设计者角度来看,集是有限制的序列。不能获取集的大小,也不能通过索引取出集原创 2016-04-14 18:08:00 · 4474 阅读 · 0 评论 -
jQuery 获取文本框内的输入文字,将其设为value属性的值
jQuery代码,实时获取输入框内的文字,将其设为该文本框Value属性的值,测试代码如下: 点击显示输入框的Value值 $(document).ready(function(){ $("#messageSearchBtn").click(function(){$("#findMsg").bind('in原创 2016-07-12 16:38:12 · 4592 阅读 · 0 评论 -
HTML常用标签介绍
主要介绍HTML标签,不废话,上标签。 定义HTML文档 包含所有头部标签元素。在元素中你可以插入脚本(scripts),样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为,,,,,, 描述基本的元数据,标签提供了元数据,元数据不显示在页面上,但会被浏览器解析。META元素通常用于指定页面的描述,关键词,文件的最后修改时间,作者和其他元数据原创 2016-04-15 16:37:44 · 312 阅读 · 0 评论 -
零基础学习jQuery------第二篇
JQuery选择器原创 2015-12-23 12:59:07 · 508 阅读 · 0 评论 -
Axios传参的两种方式,表单数据和json字符串(Form Data和Request Payload)
第一种方式:Form DataAxios参数配置:1、引入import Qs from 'qs'2、 return request({ headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest:...原创 2018-08-17 10:06:07 · 80786 阅读 · 16 评论 -
Axios 跨域请求只请求了一次
Axios跨域请求应该请求两次,第一次请求到服务器,请求的类型是OPTIONSRequest Method:OPTIONS如果后端解决了跨域请求,后端服务器应该在返回头里加上以下几个参数Access-Control-Allow-Origin:*Access-Control-Allow-Headers:x-requested-with,content-type,X-Tok...原创 2018-08-17 14:11:24 · 1608 阅读 · 0 评论 -
基于element ui下拉框的省市二级联动Vue组件
本人Vue小白,代码比较粗陋简单,欢迎指导。以下源码基于element ui下拉框,对外输出为选择省、市的城市编码,提供重置的方法。json文件查看另一篇文章:https://blog.csdn.net/u013253924/article/details/84334144<template> <div class="province-city"> ...原创 2018-11-23 10:03:21 · 19925 阅读 · 5 评论 -
中国城市代码json,省市二级联动json
根据中国城市代码表整理的json文件:level代表行政级别code代表城市编码{ "provinces": [ { "name":"北京市", "level":"1", "code":"1100", "cities":[ { "n原创 2018-11-22 09:52:43 · 17413 阅读 · 2 评论 -
Eslint:'$' is not defined
修改这个文件:.eslintrc.js env: { browser: true, node: true, es6: true, jquery: true}, 增加jquery: true原创 2018-11-13 17:47:58 · 3801 阅读 · 0 评论 -
Vue 中 a标签上href无法跳转
问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常。解决: 在App.vue 里增加判断IE浏览器手动修复……export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in docume...转载 2018-11-13 15:21:07 · 10722 阅读 · 0 评论