文章包括进修中碰到的题目

小白水平 能够会包括一些毛病 或许还没写完… 或许非最好实践 仅供参考

1.父子组件的v-model

• 参考vue官方文档：点我
• 父级不须要操纵分外代码
• 子代操纵要领一：

• 这个vue的官方api会有引见

      model: {
          prop: 'checked',
          event: 'change'
      }

  • v-on:change="$emit('change', $event.target.checked)"

• 子代操纵要领二：

      props:{
          value:[String,Number],
      }

      handleInput(event) {
          const value = event.target.value;
          // 经由过程这个完成v-model的set
          this.$emit('input', value);
      },

• 2018/8/21 update: 看了不少文章，这类比较多 以input为例子
• 先简朴引见下 v-model 语法糖

    <input
         :value="something"
         @input="something=$event.target.value"
    />
    <!-- 组件上的简化 -->
    <custom-input
    :value="something"
    @input="something=$event"
    >    
    </custom-input>

    <!-- 子组件 -->
    <input type="text" :value="currentValue" @input="handleInput">
    <!-- 1.子组件设置props的value -->
     props:['value'],//接收父组件通报过来的value值 
    <!-- 2.向父组件通报转变的值 -->
     methods:{
            handleInput(event){
                let value =event.target.value;
                this.$emit('input',value);//触发input事宜，并传入新的值
            },
            setCurrentValue(value) {
                this.currentValue = value;
            },
        } 
    <!-- 3.主要：经由过程watch父组件的value转变才会更新子组件 这里之前就会涌现父级value转变 子代不转变的bug-->
    watch: {
      value(val, oldValue) {
        this.setCurrentValue(val);
      }
    },

2.父子组件的DOM事宜

    // 例子
     <input type="checkbox" ref='switch' @click="handleClick"/>
     handleClick(evt) {
        this.$emit('click', evt);
      }
    // 例子
     <input type="checkbox" ref='switch' @focus="handleFocus"/>
     handleFocus(event) {
        this.focused = true;
        this.$emit('focus', event);
      },

3.父子组件的data

• 比方placeholder能够直接写，在组件中运用v-bind:’$attrs’

4.父子组件的要领

• 组件运用的时刻会触发一些要领，这个要领怎样在父级实行，比方上岸按钮触发(19/4/8:回头看看这句话，我当时在想什么？)
• 这个应当看作上面DOM事宜，当子元素触发click，onmouseout，onmouseenter时经由过程emit触发父级的一个要领

5.父子组件款式的设置

  /* 父组件 */
  <Example :width=40></Example>
  /* 子组件 */
  <span class="el-switch__core" ref="core" :style="{ 'width': width + 'px' }">

6.组件的注册和装置

• Vue.use()

    // 第一步，注册组件
    import Switch from './src/component';
    Switch.install = function(Vue) {
        // name="TuiSwitch"
        Vue.component(Switch.name, Switch);
    };
    export default Switch;
    // 第二步，装置组件(main.js)
    import Switch from 'install文件';
    Vue.use(Switch);
    // 第三步，在组件中直接运用即可
    <tui-switch></tui-switch>

7.百分比宽高

• 离开规范文档流的块级元素的百分百宽高是依据间隔近来的定位元素的borderwidth
• 平常状况下设置百分百自适应规划是依据父级元素的contentwidth

8.垂直方向margin，padding的百分比

• 垂直方向margin，padding百分比，每每不是我们意料中是依据上级元素的高度(height)来盘算的，实际上是依据宽度(width)来盘算的
• 假如为了完成间距结果能够运用一个空的且高度(height)为百分比的div来完成

9.axios

• 全局设置：

    axios.defaults.timeout = 30000;
    // 开辟时只体贴接口称号即可
    axios.defaults.baseURL = "http://10.0.1.1:8080";
    // 设置axios的拦截器，能够用来设置token
    axios.interceptors.request.use(
        config => {
            if (localStorage.getItem("token")) {
                config.headers.Authorization = localStorage.getItem("token");
            }
            return config
        },
        error => {
            return Promise.reject(error)
        }
    );

• axios 涌现415毛病,须要在request设置content-type

    axios.post(url, params, {
            headers: {
                "Content-Type": "application/json;charset=UTF-8"
            }
            }).then(res=>{})

• 天生有转义字符的数据

    JSON.stringify({sdkParams: JSON.stringify(this.params)});
    <!-- 这模样背面的字符串中的引号就会有转义字符 -->

10.git

• origin master:master
• 经由过程 git remote -v 显现origin代表的长途地点
• 第一个master示意当地的分支名
• 第二个master示意长途的分支名,假如没有会新建
• win10 中运用 webstorm 时 git不小心保留毛病的暗码用户名 push会一向失足 能够搜刮windows凭证 然后修正即可

11.剖析elementUI

• 解压压缩包到当前项目的node_modules目次
• node modules 的一些划定规矩
• import element-ui from ‘element-ui’

Node将在node_modules中搜刮element-ui目次，Node会假定element-ui为一个包并试图找到包定义文件package.json。假如element-ui目次里没有包括package.json文件，Node会假定默许主文件为index.js，即会加载index.js。假如index.js也不存在，那末加载将失利。
package.json:
{
  "license": "MIT",
  "main": "lib/element-ui.common.js",
  "name": "element-ui",
}
node将会返回element-ui.common.js模块

12.WebSocket

    websocket(prodId) {
        this.ws = new WebSocket('ws://..........');
        this.ws.onopen = function () {
          console.log("ws connected!");
        };
        this.ws.onmessage = e => {

        };
        this.ws.onclose = function () {
          // 封闭 websocket后的回调函数
          console.log("ws closed");
        };
        // 组件烧毁时挪用，主动封闭websocket衔接
        this.over = () => {
          ws.close();
        };
      },
    beforeDestroy() {
        if (this.over) {
          this.over();
        }
    send(msg){
        if(this.ws){
            this.ws.send(msg)
        }
    }

13.Vue单文件花样

    <!-- 这是文件扩大名为 .vue 的 single-file components(单文件组件) 比拟传统new Vue({ el: '#container '})要好许多 -->
    <template>
        <div>This will be pre-compiled</div>
    </template>
    <script src="./my-component.js"></script>
    <style src="./my-component.css"></style>
    <!-- 开辟时也会常常运用这类的花样 -->

14.button的切换动画

• 具有切换结果的动画能够运用checked来完成，而且能够运用$refs来依据checked的状况来设置款式

15.vh,vw

• 相对于视口的长度单元，pc视口就是浏览器窗口，所以能够完成window.onresize的结果(这句话应当是自适应的意义？)

16.flex

• flex是flex-grow flex-shrink flex-basis的缩写

  • flex-grow比拟其他元素的比例
  • flex-shrink元素占得份数，用来盘算压缩时缩放的水平
  • flex-basis元素默许宽度
• flex:1 的子代会自动撑开填满空缺部位,在不运用相对定位时，能够完成一个宽度自适应，另一个宽度牢固（运用width设置牢固值）

• 在有牢固高的容器中完成题目在上面,内容在盈余高度居中:

  • 父元素

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

  • 题目flex:1来完成占满一行
  • 须要居中的子元素align-self: flex-start||baseline;都能够完成,(测试元素是一个img)

17.事宜的解绑

var EventUtil={
     /*检测绑定事宜*/
     addHandler:function(element,type,handler){
         if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }
        else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }
        else{
            element["on"+type]=handler /*直接赋给事宜*/
        }

    },
    /*经由过程removeHandler*/
    removeHandler:function(element,type,handler) {   /*Chrome*/
        if (element.removeEventListener)
            element.removeEventListener(type, handler, false);
        else if (element.deattachEvent) {               /*IE*/
            element.deattachEvent('on' + type, handler);
        }
        else {
            element["on" + type] = null;
            /*直接赋给事宜*/
        }
    }
};

### 18.多层组件的封装

• 实在多层组件中参数是能够通报的,比方这个taginput,而且运用v-model通报参数，并不须要运用watch监听value转变然后运用$emit,value变化会自动从子组件通报到最外层

• 18-9-13 当时的看法有点弱智啊，这个这个直接转变了子组件中的值啊，能够是因为对象深度缘由没有报错？

    <!-- 数据单向绑定，不须要运用watch从父组件更新值到子组件，这句话很抵牾啊 -->
    <template>
    <div>
        <div class="product_info_row" v-for='(arr,index) in value' :key="index">
        <div class="tag_input">
            <lubun-input :cancleable='true' v-for='(v,i) in arr.tags' :key="i" type="text" v-model="v.value" :width=width :tagrow='index'
            :tagid='v.id' @click='removeTag' />
            <!-- 落空核心也须要保留 -->
            <lubun-input autofocus v-if='arr.show' type="text" v-model="arr.value" :width=80 @enter='buildTag(arr)' @blur='buildTag(arr)'
            />
            <lubun-button v-else text="+" @click="addTag(arr)" :width=30 />
        </div>
        </div>
    </div>
    </template>
    <script>
    export default {
        name: "LubunTaginput",
        componentName: "LubunTaginput",
        props: {
            width: {
                type: [String, Number],
                default: 150
            },
            value: {
                type: Array,
                default: function () {
                    return [
                        {
                        id: 0,
                        show: false,
                        value: "",
                        tags: []
                        }
                    ]
                }
            }
        },
        methods: {
            addTag(rows) {
                rows.show = true;
                rows.value = "";
            },
            removeTag(obj) {
                // console.log("传入的rows:",obj);
                var tags = this.value[obj.tagRow].tags;
                // console.log("rows中的tags",tags);
                for (let i = 0; i < tags.length; i++) {
                    // console.log("轮回tags：", tags[i]);
                    if (tags[i].id === obj.tagId) {
                        // console.log('find');
                        tags.splice(i, 1);
                        return;
                    }
                }
            },
            buildTag(rows) {
                rows.show = false;
                // 内容为空不会天生tag
                if (rows.value !== "") {
                    rows.tags.push({ id: rows.id++, value: rows.value });
                    rows.value = "";
                }
            }
        },
    };
    </script>

19.absolute的宽度

• 有些状况absolute居中须要运用两个嵌套absolute的div，这个时刻最外层有能够会宽度不会被内容撑开，假如是文本的话能够运用white-space:nowrap 如许就能够撑开两个div了
• transform: translateX(-50%);transform: translateY(-50%);只会有一个见效， 须要运用缩写情势 transform: translate(-50%,-50%); 这个能够完成一个absolute块圆满居中

20.vue事宜总线:BUS

• 处置惩罚组件之间信息的通报,发送数据的组件运用$on(“Event Name”,value)事宜触发(当数据转变时触发这个函数就能够了),接收数据的组件运用$emit(“Event Name”,callback)接收即可,你能够把这个事宜注册在mounted中(以后这个就能够等着其他组件$emit的数据了)
• 事宜有时刻会反复触发：注册的事宜是全局的，它并不会跟着组件的烧毁而自动注销，须要手动注销

 beforeDestroy() {
             //组件烧毁前须要解绑事宜。不然会涌现反复触发事宜的题目
             bus.$off("Event Name");
         },

• PS:在生命周期beforeDestroy,destroy中,this.$route.path 获取到的实际上是下一个页面的path

21.flex两列规划

• 摆布两列规划
• 左侧宽度自适应，但是有个最小宽度
• 右侧宽度牢固

    father{
        display: flex;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    child-left{
        position: relative;
        min-width: 800px;
        height: 100%;
        flex: 1;
    }
    child-right{
        position: relative;
        min-width: 420px;
        height: 100%;
    }

22.上传图片按钮

• 运用lable+vue完成

    <label style="width:80%" class='btn' for="uploadPic">上传文件</label>
    <input id="uploadPic" type="file" @change='uploadPic' style="display:none">

• 运用js完成

    <span class="button" onclick="sel_local_images()" id="add_img" title="Add new file from local disk">加载图片</span>
    <input type="file" id="invisible_file_input" name="files[]" style="display:none">
    //js中再给input加change事宜即可
    //这个也能够在vue中运用，给input加@change,然后手动触发这个input 的click()就能够弹出上传文件的界面了

    var invisible_file_input = document.getElementById("invisible_file_input");
    function sel_local_images() {
                 if (invisible_file_input) {
                     invisible_file_input.setAttribute('multiple', 'multiple');
                     invisible_file_input.accept = '.jpg,.jpeg,.png,.bmp';
                     invisible_file_input.onchange = (e)=>{
                         // 取得第一张图片
                         var img = e.target.files[0];
                     };
                     invisible_file_input.click();
                 }
             }

23.图片base64显现

                //reader有几个读取文件的要领用于读取成差别花样，另有几个钩子函数用于差别阶段实行一些功用
                // var img =xxxxxxxxxxxx 
                // 将图片的base64花样显现在页面上,图片能够运用input上传
                let reader = new FileReader();
                reader.onload = (theFile)=>{
                        that.imgLoaded = e.target.result;
                        // 2018-10-24 图片还没有加载完成,不是DOM的题目,运用onload才准确取得原始宽高
                        var i = new Image();
                        i.src = e.target.result;
                        i.onload = () => {
                            img_loaded_width = i.width;
                            img_loaded_height = i.height;
                }}
                // 这个貌似会实行上面的onload
                reader.readAsDataURL(img);

24.前端下载文件

    var blob = new Blob([JSON.stringify(data, null, 2)],{type : 'application/json'});
    var aTag = document.getElementById('download_img');
    aTag.setAttribute('href', URL.createObjectURL(blob));
    aTag.setAttribute('download',  that.imgLoadedName.split('.')[0]+'.json');
    aTag.click();

25. vue中ref定名不能够运用中划线

26. 前端挪用相机

• 经由过程video控件，经由过程捕捉video的流，截取video中的图象完成照相，
• 经由过程input[file]控件挪用挪动端的摄像头，完成照相。

    第一种能够完成对照相界面的重写，IPhone环境11最先兼容；

    第二种体式格局实际上是挪用input[type='file']，会弹出一个挑选框让用户挑选是挪用相机照样挪用相册，

    第二种兼容优于第一种，不好的处所就是这类要领无法控制照相，想要在挪动端完成只能照相不能挑选照片或许在照相界面增加指导遮罩层的要领是行不通了。

    <video width="640" height="480" id="myVideo"></video>
    <canvas width="640" height="480" id="myCanvas"></canvas>
    <button id="myButton">截图</button>
    <button id="myButton2">预览</button>
    <button id="myButton3">
        <a download="video.png">另存为</a>
    </button>

    var cobj = document.getElementById('myCanvas').getContext('2d');
    var vobj = document.getElementById('myVideo');

    getUserMedia({video: true}, function (stream) {
        vobj.src = stream;
        vobj.play();
    }, function () {
    });


    document.getElementById('myButton').addEventListener('click', function () {
        cobj.drawImage(vobj, 0, 0, 640, 480);
        document.getElementById('myButton3').children[0].href = cobj.canvas.toDataURL("image/png");
    }, false);

    document.getElementById('myButton2').addEventListener('click', function () {
        window.open(cobj.canvas.toDataURL("image/png"), '_blank');
    }, false);


    function getUserMedia(obj, success, error) {
        if (navigator.getUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.getUserMedia(obj, function (stream) {
                    success(stream);
                }, error);
            }
        } else if (navigator.webkitGetUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.webkitGetUserMedia(obj, function (stream) {
                    var _URL = window.URL || window.webkitURL;
                    success(_URL.createObjectURL(stream));
                }, error);
            }
        } else if (navigator.mozGetUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.mozGetUserMedia(obj, function (stream) {
                    success(window.URL.createObjectURL(stream));
                }, error);
            }
        } else {
            return false;
        }
        return getUserMedia(obj, success, error);
    }

27. xml剖析：<command>标签在转成DOM时会直接去掉中心的子代，很新鲜

28. el的表单考证prop和rule中属性名和v-model的参数称号是要雷同的

29. RestTemplate的要求会经由过程其他效劳的过滤器

30. jenkins rancher 完成延续集成 jira跟踪

31. n不换行

    有时刻后端传过来的字符串中\\n转成字符对象时会成为\n但是在vue中衬着到页面中不会涌现换行，而是显现为\n
    (compose.environment[key]).replace(/\\n/g,'\n') 然后就能够完成前端换行了 很新鲜 不知道为何

32. 通报纯真数组的后端操纵

     //{men:{name:'Kik',age:11},place:['A','B','C']}
     ArrayList<String> place = (ArrayList<String>) jsonObject.getObject("place", List.class);

33. fastJSON平常用法

    String algorithmList = "["a","b","c"]" 
    List<String> apacMainIdList = JSONObject.parseObject(algorithmList, List.class);

34. body的带siderbar的自适应规划

     <!--运用absolute和top,left,right,bottom来完成div添补盈余部份-->
     <div style="position:absolute;background:#ccc;top:0;left:0;right:0;bottom:0;overflow:hidden">
           <div style="position:absolute;width:140px;background:#C00;top:0;left:0;bottom:0">
           </div>
           <div style="position:absolute;left:140px;background:#0C0;top:0;right:0;bottom:0;">
           </div>
     </div>

35. 前端读取收集途径文件

• XMLHttpRequest

    // 读取为二进制
    function createXHR(){
        return window.XMLHttpRequest?
        new XMLHttpRequest():
        new ActiveXObject("Microsoft.XMLHTTP");
    }
    function getData(url){
        let request = createXHR();
        request.open("GET",url,false);
        request.responseType = 'blob';
        request.onload = function () {
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(request.response);
                        reader.onload = function (e) {
                            var DAT_data = e.target.result;
                            console.log("DAT_data:" + DAT_data);
                        };
                    };
        request.send();
    }

• ajax

36. event.target 和 event.currentTarget

• target是触发事宜的谁人元素 currentTarget是处置惩罚这个事宜的元素 比方ul和li，给ul绑定点击事宜，点击li后，target是li，currentTarget是ul

能够参考

• 组件中通报参数等要领：https://segmentfault.com/a/11…