前端小姿勢(shì)

LeexMuller 發(fā)布于2019-08-29 18:31 / 2164人閱讀

摘要：文章包含學(xué)習(xí)中遇到的問題小白水平可能會(huì)包含一些錯(cuò)誤或者還沒寫完或者非最佳實(shí)踐僅供參考父子組件的參考官方文檔點(diǎn)我父級(jí)不需要操作額外代碼子代操作方法一這個(gè)的官方會(huì)有介紹子代操作方法二通過這個(gè)實(shí)現(xiàn)的看了不少文章，這種比較多以為例子先簡(jiǎn)單介紹

文章包含學(xué)習(xí)中遇到的問題

小白水平 可能會(huì)包含一些錯(cuò)誤 或者還沒寫完... 或者非最佳實(shí)踐 僅供參考

1.父子組件的v-model

參考vue官方文檔：點(diǎn)我

父級(jí)不需要操作額外代碼

子代操作方法一：

這個(gè)vue的官方api會(huì)有介紹

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

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

子代操作方法二：

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

    handleInput(event) {
        const value = event.target.value;
        // 通過這個(gè)實(shí)現(xiàn)v-model的set
        this.$emit("input", value);
    },

2018/8/21 update: 看了不少文章，這種比較多以input為例子

先簡(jiǎn)單介紹下 v-model 語法糖

    
    
        
    

    
    
    
     props:["value"],//接受父組件傳遞過來的value值 
    
     methods:{
            handleInput(event){
                let value =event.target.value;
                this.$emit("input",value);//觸發(fā)input事件，并傳入新的值
            },
            setCurrentValue(value) {
                this.currentValue = value;
            },
        } 
    
    watch: {
      value(val, oldValue) {
        this.setCurrentValue(val);
      }
    },

2.父子組件的DOM事件

    // 例子
     
     handleClick(evt) {
        this.$emit("click", evt);
      }
    // 例子
     
     handleFocus(event) {
        this.focused = true;
        this.$emit("focus", event);
      },

3.父子組件的data

比如placeholder可以直接寫，在組件中使用v-bind:"$attrs"

4.父子組件的方法

組件使用的時(shí)候會(huì)觸發(fā)一些方法，這個(gè)方法怎么在父級(jí)執(zhí)行，比如登陸按鈕觸發(fā)(19/4/8:回頭看看這句話，我當(dāng)時(shí)在想什么？)

這個(gè)應(yīng)該看做上面DOM事件，當(dāng)子元素觸發(fā)click，onmouseout，onmouseenter時(shí)通過emit觸發(fā)父級(jí)的一個(gè)方法

5.父子組件樣式的設(shè)置

  /* 父組件 */
  
  /* 子組件 */

6.組件的注冊(cè)和安裝

Vue.use()

    // 第一步，注冊(cè)組件
    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);
    // 第三步，在組件中直接使用即可

7.百分比寬高

脫離標(biāo)準(zhǔn)文檔流的塊級(jí)元素的百分百寬高是根據(jù)距離最近的定位元素的borderwidth

一般情況下設(shè)置百分百自適應(yīng)布局是根據(jù)父級(jí)元素的contentwidth

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

垂直方向margin，padding百分比，往往不是我們意料中是根據(jù)上級(jí)元素的高度(height)來計(jì)算的，其實(shí)是根據(jù)寬度(width)來計(jì)算的

如果為了實(shí)現(xiàn)間距效果可以使用一個(gè)空的且高度(height)為百分比的div來實(shí)現(xiàn)

9.axios

全局配置：

    axios.defaults.timeout = 30000;
    // 開發(fā)時(shí)只關(guān)心接口名稱即可
    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 出現(xiàn)415錯(cuò)誤,需要在request設(shè)置content-type

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

生成有轉(zhuǎn)義字符的數(shù)據(jù)

    JSON.stringify({sdkParams: JSON.stringify(this.params)});

10.git

origin master:master

通過 git remote -v 顯示origin代表的遠(yuǎn)程地址

第一個(gè)master表示本地的分支名

第二個(gè)master表示遠(yuǎn)程的分支名,如果沒有會(huì)新建

win10 中使用 webstorm 時(shí) git不小心保存錯(cuò)誤的密碼用戶名 push會(huì)一直出錯(cuò) 可以搜索windows憑據(jù) 然后修改即可

11.分析elementUI

解壓壓縮包到當(dāng)前項(xiàng)目的node_modules目錄

node modules 的一些規(guī)則

import element-ui from "element-ui"

Node將在node_modules中搜索element-ui目錄，Node會(huì)假設(shè)element-ui為一個(gè)包并試圖找到包定義文件package.json。如果element-ui目錄里沒有包含package.json文件，Node會(huì)假設(shè)默認(rèn)主文件為index.js，即會(huì)加載index.js。如果index.js也不存在，那么加載將失敗。
package.json:
{
  "license": "MIT",
  "main": "lib/element-ui.common.js",
  "name": "element-ui",
}
node將會(huì)返回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 () {
          // 關(guān)閉 websocket后的回調(diào)函數(shù)
          console.log("ws closed");
        };
        // 組件銷毀時(shí)調(diào)用，主動(dòng)關(guān)閉websocket連接
        this.over = () => {
          ws.close();
        };
      },
    beforeDestroy() {
        if (this.over) {
          this.over();
        }
    send(msg){
        if(this.ws){
            this.ws.send(msg)
        }
    }

13.Vue單文件格式

14.button的切換動(dòng)畫

具有切換效果的動(dòng)畫可以使用checked來實(shí)現(xiàn)，并且可以使用$refs來根據(jù)checked的狀態(tài)來設(shè)置樣式

15.vh,vw

相對(duì)于視口的長(zhǎng)度單位，pc視口就是瀏覽器窗口，所以可以實(shí)現(xiàn)window.onresize的效果(這句話應(yīng)該是自適應(yīng)的意思？)

16.flex

flex是flex-grow flex-shrink flex-basis的縮寫

flex-grow相比其他元素的比例

flex-shrink元素占得份數(shù)，用來計(jì)算收縮時(shí)縮放的程度

flex-basis元素默認(rèn)寬度

flex:1 的子代會(huì)自動(dòng)撐開填滿空白部位,在不使用絕對(duì)定位時(shí)，可以實(shí)現(xiàn)一個(gè)寬度自適應(yīng)，另一個(gè)寬度固定（使用width設(shè)置固定值）

在有固定高的容器中實(shí)現(xiàn)標(biāo)題在上面,內(nèi)容在剩余高度居中:

父元素

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

標(biāo)題flex:1來實(shí)現(xiàn)占滿一行

需要居中的子元素align-self: flex-start||baseline;都可以實(shí)現(xiàn),(測(cè)試元素是一個(gè)img)

17.事件的解綁

var EventUtil={
     /*檢測(cè)綁定事件*/
     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.多層組件的封裝

其實(shí)多層組件中參數(shù)是可以傳遞的,比如這個(gè)taginput,而且使用v-model傳遞參數(shù)，并不需要使用watch監(jiān)聽value改變?nèi)缓笫褂?emit,value變化會(huì)自動(dòng)從子組件傳遞到最外層

18-9-13 當(dāng)時(shí)的觀點(diǎn)有點(diǎn)弱智啊，這個(gè)這個(gè)直接改變了子組件中的值啊，可能是因?yàn)閷?duì)象深度原因沒有報(bào)錯(cuò)？

19.absolute的寬度

有些情況absolute居中需要使用兩個(gè)嵌套absolute的div，這個(gè)時(shí)候最外層有可能會(huì)寬度不會(huì)被內(nèi)容撐開，如果是文本的話可以使用white-space:nowrap 這樣就可以撐開兩個(gè)div了

transform: translateX(-50%);transform: translateY(-50%);只會(huì)有一個(gè)生效，需要使用縮寫形式 transform: translate(-50%,-50%); 這個(gè)可以實(shí)現(xiàn)一個(gè)absolute塊完美居中

20.vue事件總線:BUS

解決組件之間信息的傳遞,發(fā)送數(shù)據(jù)的組件使用$on("Event Name",value)事件觸發(fā)(當(dāng)數(shù)據(jù)改變時(shí)觸發(fā)這個(gè)函數(shù)就可以了),接受數(shù)據(jù)的組件使用$emit("Event Name",callback)接受即可,你可以把這個(gè)事件注冊(cè)在mounted中(之后這個(gè)就可以等著其他組件$emit的數(shù)據(jù)了)

事件有時(shí)候會(huì)重復(fù)觸發(fā)：注冊(cè)的事件是全局的，它并不會(huì)隨著組件的銷毀而自動(dòng)注銷，需要手動(dòng)注銷

 beforeDestroy() {
             //組件銷毀前需要解綁事件。否則會(huì)出現(xiàn)重復(fù)觸發(fā)事件的問題
             bus.$off("Event Name");
         },

PS:在生命周期beforeDestroy,destroy中,this.$route.path 獲取到的其實(shí)是下一個(gè)頁面的path

21.flex兩列布局

左右兩列布局

左邊寬度自適應(yīng)，但是有個(gè)最小寬度

右邊寬度固定

    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實(shí)現(xiàn)

    上傳文件

使用js實(shí)現(xiàn)

    加載圖片
    
    //js中再給input加change事件即可
    //這個(gè)也可以在vue中使用，給input加@change,然后手動(dòng)觸發(fā)這個(gè)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有幾個(gè)讀取文件的方法用于讀取成不同格式，還有幾個(gè)鉤子函數(shù)用于不同階段執(zhí)行一些功能
                // 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;
                }}
                // 這個(gè)貌似會(huì)執(zhí)行上面的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. 前端調(diào)用相機(jī)

通過video控件，通過捕獲video的流，截取video中的圖像實(shí)現(xiàn)拍照，

通過input[file]控件調(diào)用移動(dòng)端的攝像頭，實(shí)現(xiàn)拍照。

    第一種可以實(shí)現(xiàn)對(duì)拍照界面的重寫，IPhone環(huán)境11開始兼容；

    第二種方式實(shí)際上是調(diào)用input[type="file"]，會(huì)彈出一個(gè)選擇框讓用戶選擇是調(diào)用相機(jī)還是調(diào)用相冊(cè)，

    第二種兼容優(yōu)于第一種，不好的地方就是這種方法無法控制拍照，想要在移動(dòng)端實(shí)現(xiàn)只能拍照不能選擇照片或者在拍照界面添加引導(dǎo)遮罩層的方法是行不通了。

    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解析：標(biāo)簽在轉(zhuǎn)成DOM時(shí)會(huì)直接去掉中間的子代，很奇怪 28. el的表單驗(yàn)證prop和rule中屬性名和v-model的參數(shù)名稱是要相同的 29. RestTemplate的請(qǐng)求會(huì)通過其他服務(wù)的過濾器 30. jenkins rancher 實(shí)現(xiàn)持續(xù)集成 jira跟蹤 31. n不換行

    有時(shí)候后端傳過來的字符串中
轉(zhuǎn)成字符對(duì)象時(shí)會(huì)成為
但是在vue中渲染到頁面中不會(huì)出現(xiàn)換行，而是顯示為

    (compose.environment[key]).replace(/
/g,"
") 然后就可以實(shí)現(xiàn)前端換行了 很奇怪 不知道為什么

32. 傳遞單純數(shù)組的后端操作

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

33. fastJSON一般用法

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

34. body的帶siderbar的自適應(yīng)布局

35. 前端讀取網(wǎng)絡(luò)路徑文件

XMLHttpRequest

    // 讀取為二進(jìn)制
    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是觸發(fā)事件的那個(gè)元素 currentTarget是處理這個(gè)事件的元素比如ul和li，給ul綁定點(diǎn)擊事件，點(diǎn)擊li后，target是li，currentTarget是ul

可以參考

組件中傳遞參數(shù)等方法：https://segmentfault.com/a/11...