每日成长日记

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

  <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

  <a-component></a-component>
  mounted() {
  this.$emit("message", "The message you want to transmit");
  {
  

  – son b-component

  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原理的实现

  1. 创建Ajax对象，对特殊浏览器ie6进行适配

      if(XMLHttpRequest){
          var ajax = new XMLHttpRequest();
      }else {
          var ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
      }
     

  2. 与服务器建立连接

      ajax.open("获取的方式(GET,POST,PUTE,DELETE,UPDATE)", "文件名", 是否异步(true or false));
     

  3. 发送请求

      ajax.send();
     

  4. 接收返回

      ajax.onreadystatechange = function() {
          返回的数据获取
      }
     

• Python爬虫入门

  1. xpath和requests进行HTML文件的获取；
  2. beautifulsoup对文档进行有效信息的选择；
  3. 使用“非关系型数据库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进行多级判断，也能使用在

---

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（机器流程自动化）