摘要:文章包含學習中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現的看了不少文章,這種比較多以為例子先簡單介紹
文章包含學習中遇到的問題
小白水平 可能會包含一些錯誤 或者還沒寫完... 或者非最佳實踐 僅供參考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 語法糖
2.父子組件的DOM事件props:["value"],//接受父組件傳遞過來的value值 methods:{ handleInput(event){ let value =event.target.value; this.$emit("input",value);//觸發input事件,并傳入新的值 }, setCurrentValue(value) { this.currentValue = value; }, } watch: { value(val, oldValue) { this.setCurrentValue(val); } },
// 例子 handleClick(evt) { this.$emit("click", evt); } // 例子 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.父子組件樣式的設置/* 父組件 */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); // 第三步,在組件中直接使用即可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單文件格式
14.button的切換動畫This will be pre-compiled
具有切換效果的動畫可以使用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 當時的觀點有點弱智啊,這個這個直接改變了子組件中的值啊,可能是因為對象深度原因沒有報錯?
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實現
使用js實現
加載圖片
//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"],會彈出一個選擇框讓用戶選擇是調用相機還是調用相冊, 第二種兼容優于第一種,不好的地方就是這種方法無法控制拍照,想要在移動端實現只能拍照不能選擇照片或者在拍照界面添加引導遮罩層的方法是行不通了。
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解析:
有時候后端傳過來的字符串中 轉成字符對象時會成為 但是在vue中渲染到頁面中不會出現換行,而是顯示為 (compose.environment[key]).replace(/ /g," ") 然后就可以實現前端換行了 很奇怪 不知道為什么32. 傳遞單純數組的后端操作
//{men:{name:"Kik",age:11},place:["A","B","C"]} ArrayList33. fastJSON一般用法place = (ArrayList ) jsonObject.getObject("place", List.class);
String algorithmList = "["a","b","c"]" List34. body的帶siderbar的自適應布局apacMainIdList = JSONObject.parseObject(algorithmList, List.class);
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.currentTargettarget是觸發事件的那個元素 currentTarget是處理這個事件的元素 比如ul和li,給ul綁定點擊事件,點擊li后,target是li,currentTarget是ul
可以參考組件中傳遞參數等方法:https://segmentfault.com/a/11...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103308.html
摘要:四結語七夕已至,快和親愛的人綁定最美戀愛關系吧在這里,你們就是導演,記錄美好愛情。特別說明此小程序,是我親手為女朋友寫的,感謝她提供需求支持,七夕快樂。 showImg(https://segmentfault.com/img/remote/1460000020001501?w=779&h=203); 一、前言 像每一滴酒回不了最初的葡萄,我回不到年少。愛情亦是如此,這就是寫一篇小程序...
摘要:肥皂,哦不,安裝包需要經過兩次網絡傳輸從前端傳到后端再傳到存儲云。安裝包一般體積都不小,兩次傳輸會浪費很長時間。 背景 最近公司內部的一個管理安裝包的平臺準備進行重構,之前安裝包上傳的姿勢是這樣的 showImg(https://segmentfault.com/img/remote/1460000017551542?w=336&h=267); 不好意思,放錯了,是這樣的: 前端選擇...
摘要:文章包含學習中遇到的問題小白水平可能會包含一些錯誤或者還沒寫完或者非最佳實踐僅供參考父子組件的參考官方文檔點我父級不需要操作額外代碼子代操作方法一這個的官方會有介紹子代操作方法二通過這個實現的看了不少文章,這種比較多以為例子先簡單介紹 文章包含學習中遇到的問題 小白水平 可能會包含一些錯誤 或者還沒寫完... 或者非最佳實踐 僅供參考 1.父子組件的v-model 參考vue官方文檔...
摘要:無論是早期工具,還是現在流行的配合這類構建工具而產生的雪碧圖插件。 本文原文鏈接:https://devework.com/postcss-...,轉載請注明原始來源,謝謝! showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個基于PostCSS 開發的用于生成雪碧圖圖片及其C...
閱讀 3407·2021-11-25 09:43
閱讀 2294·2021-09-06 15:02
閱讀 3538·2021-08-18 10:21
閱讀 3340·2019-08-30 15:55
閱讀 2343·2019-08-29 17:06
閱讀 3534·2019-08-29 16:59
閱讀 962·2019-08-29 13:47
閱讀 2756·2019-08-26 13:24