2018.5.18 周五
- 如何使label里面的input与其垂直居中
input { vertical-align: middle; } label { vertical-align: middle; display: inline-block; }
2018.5.22 周二
- 让一个块级元素固定位置
.block { position: fixed; left: ; top: ; }
- 在router-link时进行兄弟组件进行传递信息,简单需求如果使用vuex则大题小做
– parent
– son<b-component :msg="fromAComponent"></b-component> <router-link @message="getMesg"></router-link> data() { return { fromAComponent: '' } } methods:{ getMesg(data){ fromAComponent = data; console.log("this data from a-component"); } }
– son b-component<a-component></a-component> mounted() { this.$emit("message", "The message you want to transmit"); {
props: ['msg']
修改input或者其他元素的placeholder字体样式
a. input
::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; }
b. 其他元素
元素名::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; }
2018.5.23 周三
获取当前路由
this.$route.path
v-text与v-html辨析
a. v-text ==> {{}} 会把绑定的数据解析成文本 b. v-html会把绑定的数据解析成html标签然后输出
2018.5.28 周一
- 处理时间插件datepicker和dateTimePicker
$('#datetimepicker1').datetimepicker({ format: 'yyyy-mm', pickerPosition: 'top-right', language: 'zh-CN' }); pickerPosition 设置选择器位置
- 基于vue和e-charts的图形处理插件v-charts
2018.6.1 周五
- faraday slidemenu的修复以及部分jQuery ==> vue
渐变的css实现
1.线性渐变
1.1默认从上到下direction(left,right,left top,right bottom) ``` background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 1.2角度旋转渐变 ``` background: linear-gradient(angle, color-stop1, color-stop2); ```
- 设置多个颜色
background: linear-gradient(color-stop0, color-stop1, color-stop2, ...);
- 使用透明度设置渐变效果
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
- 重复的线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
- css径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
- 设置形状和大小的渐变shape(circle, ellipse)size(closest-side, farthest,closest-corner,farthest-corner)
background: radial-gradient(center, shape size, start-color, ..., last-color);
2018.6.2 周六
Ajax原理的实现
- 创建Ajax对象,对特殊浏览器ie6进行适配
if(XMLHttpRequest){ var ajax = new XMLHttpRequest(); }else { var ajax = new ActiveXObject("Microsoft.XMLHTTP"); }
- 与服务器建立连接
ajax.open("获取的方式(GET,POST,PUTE,DELETE,UPDATE)", "文件名", 是否异步(true or false));
- 发送请求
ajax.send();
- 接收返回
ajax.onreadystatechange = function() { 返回的数据获取 }
- 创建Ajax对象,对特殊浏览器ie6进行适配
Python爬虫入门
- xpath和requests进行HTML文件的获取;
- beautifulsoup对文档进行有效信息的选择;
- 使用“非关系型数据库mongodb”对数据进行存储;
2018.6.4 周一
- icheck对CheckBox和radio的美化
- 重构界面组件化的拆分
- 配置和数据映射带来的代码优化
2018.6.25 周一
td标签对其内部文字进行换行
word-wrap:设置或检索当当前行超过指定容器的边界时是否断开转行
取值:normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
word-break:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时
取值
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
vue的filters的使用
1. (abd | myMethod(key)) 2. v-model="abd | myMethod(key)" filters: { myMethod(value, key) { 处理代码块 } }
- 映射关系在视觉上代码量少很多,进行开发的时候需要对其进行良好的说明,使后来合作者或者迭代者能够很好的维护和阅读
- 在filters里面最好不要调用method里面的函数或者异步获取后端数据(做请求)
2018.7.10 周二
- class和style支持的动态绑定适用于数组、对象,在对他进行判断或者处理时可以很好的结合计算属性进行处理;
- 动态绑定style时,会对其浏览器的类型自动添加前缀,很多css属性,如:transform、text-shadow等;
- vue会高效的复用相同的组件,这是一种很好的减少渲染的技巧,当我们需要不复用的时候我们只需要在我们想要的元素加上不同的key值就能达到效果;
- v-if和v-show都能达到影藏的效果,v-if可以使用v-else-if、v-else进行多级判断,也能使用在中,v-show则不然;
2018.7.11 周三
- input标签的@blur事件在输入框失去焦点时展示提示消息
vue将表格数据导出Excel(下载好Blob.js和Export2Excel.js放在vendor文件夹下),在build—-webpack.base.conf.js中resolve的alias加入 ‘vendor’: path.resolve(__dirname, ‘../src/vendor’),
npm install -S file-saver xlsx npm install -D script-loader
导出Excel的两个方法(函数):
export2excel() { require.ensure([], () => { const { export_json_to_excel } = require('../../vendor/Export2Excel'); const tHeader = ['', '', ''];//表头信息数组 const filterVal = ['', '', ''];//对应表头数据的key const list = this.tableData;//表头数据 const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, "Excel的文件名"); }); } formatJson(filterVal, jsonData){ return jsonData.map(v => filterVal.map(j => v[j]); }
父组件向子组件传递数据时,当时静态数据子组件可以直接获取,当父组件通过异步请求后端数据时,需要在子组件中使用watch监听数据的改变,根据导致的问题暂且理解为数组的引用赋值导致的:
var a = [];//父组件的data中 var a = b; //b为父组件异步请求的数据 var c = a;//c子组件的props
2018.7.23 周一
- warmserver添加php7.2版本出现track_eror:在php.init文件中将display_error=Off;
- laravel框架验证注册和登录使用Auth的学习;
- 框架也实现很多功能如自动生成测试种子数据;
2018.7.24 周二
- koa的cookie不能直接设置中文需要借助Buff类转换为base64进行处理;
- vue的session通过服务器创建,在第一次请求时服务器将key作为cookie传给客户端,服务器再次请求将自动带上此cookie,这时服务器通过此key值将session中的value传给客户端;
- vue中的过滤器不能直接在内部获取data中的数据和methods中的方法,需要获取data实例中的数据一种是通过Vue的实例获取(用的少)另外一种则是在过滤器中直接通过参数传递即可;
2018.7.25 周三
行内filter
<template> <div :style="{color:$options.filters.txtToColor(msg)}"></div> <!-- 行内filter --> </template> import { txtToColor } from '/path/to/filters.js' export default { name:'a', data(){ return{ msg:123, obj:{ msg:321 } } }, filters:{ txtToColor }, watch:{ 'obj.msg'(newV,oldV){ //监听对象里的属性 } } }
配置打包后项目放在服务器哪个目录后
const router = new Router({ //此处可以利用node环境变量来设置打包后项目放在服务器某个目录后,路由的根路径配置 base: process.env.NODE_ENV==='development'?'/':'/some/dir/', //...routes }); //很多人把beforeEach写到main.js router.beforeEach((from,to,next)=>{ //...某些拦截操作,是否登录权限等 next() });
每一层子路由,就需要多一层router-view,如果只是希望浏览器的url作为语义,可以使用alias
const router = new Router({ routes:[ { path:'/a', component:A, children:[ { path:'c', } ] }, { path:'/b', component:B, alias:'/a/c'//这样当路径为/a/c时 页面显示为B,router-view也会对应根路由 } ] });
js懒加载
//router.js const router = new Router({ routes:[ { path:'/a', component:()=>import('path/to/A.vue') } ] }); //package.json "devDependencies":{ //... "babel-plugin-syntax-dynamic-import": "^6.18.0" //... } //.babelrc "plugins":["syntax-dynamic-import"]
vuex一个状态(数据)管理官方插件,高效管理全局数据,并且注入vue实例,让所有组件可以轻松读写全局数据,让所有组件直接共享状态完成通信。
strict:process.env.NODE_ENV==="development",//开发环境开启严格模式 //***.vue import {mapState,mapAction,mapMutation} from 'vuex' //将vuex的方法注入到组件中,使用更方便 export default { computed:{ ...mapState('moduleA',{ test1:'test' }), ...mapState({//vuex的根状态 test2:'test' }) }, method:{ ...mapMutation('moduleA',{ testCommit1:"testCommit" }), ...mapMutation({ testCommit2:"testCommit" }) ...mapAction('moduleA',{ testAction1:"testAction" }), ...mapAction({ testAction2:"testAction" }) }, mounted(){ this.testCommit1();//===this.$store.commit('moduleA/testCommit') this.testCommit2();//===this.$store.commit('testCommit') this.testAction1();//===this.$store.dispatch('moduleA/testAction') this.testAction2();//===this.$store.dispatch('testAction') } }
组件的缓存,内部的常用钩子函数也不会执行,只有利用专用的2个钩子去处理缓存的组件逻辑。
export default{ activated(){ //唤醒时 }, deactivated(){ //睡眠时 } }
记录常用的node包
@tweenjs/tween.js 一个js动画库
axios 支持promise的http库
qs 数据格式转换插件,配合axios使用
crypto-js 各种加密,没什么实际安全作用
prismjs 语法高亮插件
vue-lazyload 图片懒加载,功能很全
vue-meta 组件中动态修改head标签里面的内容
babel-plugin-equire echarts按需加载插件,优化写法,默认会携带指定版本的echarts,建议自行安装需要的版本覆盖
webpack-bundle-analyzer 打包完成后显示体积相关信息,可以了解是否重复加载,哪些文件过大等
以上来源:
- 作者:chavesgu
- 链接:https://juejin.im/post/5b56981b6fb9a04fd4509b76
- 来源:掘金
2018.8.1 周三
js表格排序
- 对列名绑定事件
- 获取列名对排序desc进行判断
使用sort对其排序
changeSortByColumn(columnName) { if(columnName === this.sortColumn) { this.desc = !this.desc; }else { this.sortColumn = columnName; this.desc = true; } this.sortByColumn(this.tableData); } sortByColumn(data) { return data.sort(keysrt(this.sortColumn, this.desc)); } keysrt(key, desc) { return function (a, b) { if(desc) { if(a[key] > b[key]) { return 1; }else if(a[key] < b[key]) { return -1; }else { return 0; } }else { if(a[key] > b[key]) { return -1; }else if(a[key] < b[key]) { return 1; }else { return 0; } } } }
- 开始着手于基于koa-vue-reactnative构建一个前后端系统
2018.8.16 周四
阿里云服务器部署(Windows 2008 server)
- 购买完毕设置远程连接此时需要打开gpedit.msc,打不开的则直接打开注册表运行regedit,然后找到HKEY_LOCAL_MACHINE/software/microsoft/windows/currentversion/policies/system/credssp/parameters/AllowEncryptionOracle设置值为2;
- 安装warmserver之前需要安装visual studio update不然会报找出到找不到一个dll文件;
- 在warmserver的www中部署项目部署完毕需要添加alias方能生效;
- 对服务器的防火墙进行设置,外网的配置中设置允许访问;
- 对Apache进行请求设置,设置为允许所有请求默认为local;
- 先在内网对项目进行测试访问,成功则将localhost替换为服务器ip或者域名即可。
2018.10.13 周二
关于js64位浮点类型:
- 符号位1位;
- 指数位11位;
- 小数位52位,其中小数位不包括1.xxxx之中的1.
修改谷歌浏览器默认的scrollbar:
::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #f2f2f2; } ::-webkit-scrollbar-track { /*滚动条里面轨道*/ display: none; }
webpack的require.context统一导入模块:
let repAll = require.context('./', false, '/\.js/g'); let modules = reqAll.keys().map(reqAll);
HTML的5个转义字符:
- HTML的< >&"©分别是<,>,&,”,©;的转义字符
2018.12.28 周五
移动端适配
- 三个关键指标:pageX/Y、clientX/Y、screenX/Y;
2018.1.2 周二
- 关于z-index的层级关系,一共有七个层级:border和background、负值、块级元素、浮动元素、行内元素、z-index为0、zindex为正值;
- 关于层叠层和层叠上下文,当对元素设置了定位属性就会创建一个层叠上下文,每个层叠上下文互不影响,其内部的元素也没有可比性;
- 对于可变的状态需要小心多加考虑;
2019.6.18
- 关于table的td限制宽度的问题:可以在td里面加一个行内元素然后设置宽度以及word-break:break-word/break-all;
- angular英雄列表项目实践;
- 父子组件传值;
- rpa(机器流程自动化)