目錄
一、關于vue使用vant的van-popup，子元素設定固定定位失效問題。
二、當瀏覽器因為有緩存導致頁面新增內容不生效的問題解決方法
三、代碼的另類寫法
四、解決git項目中文件夾首字母改成大寫后在遠程出現兩個文件夾的問題
五、chrome?源代碼調試快捷鍵
六、父組件獲取到子組件的屬性和方法
$refs
七、子組件獲取到父組件的屬性和方法
八、Vue.observable()
九、子組件直接修改父組件的變量值
父組件
子組件
十、字符串轉數字
十一、使用“:not”選擇器
十二、使用“caret-color”修改光標顏色
十三、不允許選擇文本
十四、現在開始說一下事件總線bus傳參
十五、delete和Vue.delete的區(qū)別
?十六、vue3新增fragment
十七、vue2和vue3的區(qū)別
十八、手寫冒泡排序——自認為比較簡單易懂的寫法
十九、名詞解釋——腳手架
?二十、Flexbox布局中的 gap
一、關于vue使用vant的van-popup，子元素設定固定定位失效問題。
position: fixed;
原因是該組件使用了transform導致，父元素使用了transform會導致子元素在使用固定定位時失效，解決方法就是把要設置固定定位的子元素放在跟組件平級的位置，變成兄弟元素。這樣就能解決
二、當瀏覽器因為有緩存導致頁面新增內容不生效的問題解決方法
直接Ctrl+F5強制刷新——不走緩存
三、代碼的另類寫法
<van-button type="default">默認按鈕</van-button>
<component is="van-button" type="default">默認按鈕</component >
?
四、解決git項目中文件夾首字母改成大寫后在遠程出現兩個文件夾的問題
最好的解決方法，直接把原文件復制一份，原文件刪了，復制的文件重命名一個新名字——跟原文件名字不一樣
然后更改所有引用的地方
五、chrome?源代碼調試快捷鍵
1.ctrl+shift+f 全文查找
2.ctrl+o 查找文件名
3. ctrl+shift+o 查找 js 函數名
六、父組件獲取到子組件的屬性和方法
$refs
$children
子傳父$emit
七、子組件獲取到父組件的屬性和方法
$attrs
父傳子props
$parent
$root
八、Vue.observable()
九、子組件直接修改父組件的變量值
父組件
? ? ? ? <HandleLogs :detail.sync="detail"></HandleLogs>
子組件
this.$emit('update:detail',{})
十、字符串轉數字
const num = "1000" * 1;
十一、使用“:not”選擇器
除了最后一個元素之外的所有元素都需要一些樣式，使用 not 選擇器會非常容易。
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
十二、使用“caret-color”修改光標顏色
caret-color: #ffd476;
十三、不允許選擇文本
user-select: none;
十四、現在開始說一下事件總線bus傳參
bus傳參其實是新建了沒有一個dom元素的vue實例，然后掛載到了vue的原型上，成為一個全局可用的傳參方法，該方法使用$emit去傳值編輯值，使用$on去監(jiān)聽獲取值，使用$off去關閉監(jiān)聽
十五、delete和Vue.delete的區(qū)別
?十六、vue3新增fragment
(跟template用法差不多)有時候我們寫了一些沒必要的div就是為了做判斷或循環(huán)用的，這時候可以用fragment代替，fragment不會作為標簽被渲染到頁面上
十七、vue2和vue3的區(qū)別
vue2是借助了Object.difineProprty去做的訂閱者發(fā)布者模式，通過get和set去監(jiān)聽并修改對象的屬性
vue3則是通過es6的proxy的做的對象代理，性能上更強大，不必進行數組重寫
vue3不再進行全量dom更新，它只會更新并渲染帶有響應式標識的元素，此乃是diff算法優(yōu)化
十八、手寫冒泡排序——自認為比較簡單易懂的寫法
var arr = [453,23,0,9,65,51, 2, 3, 4, 5, 6, 7, 8, 9,10];for(var i =0;i<arr.length;i++){for(var k =0;k<arr.length+i;k++){if(arr[k]>arr[k+1]){[arr[k],arr[k+1]]=[arr[k+1],arr[k]]}}}console.log(arr)
十九、名詞解釋——腳手架
是一個可以讓開發(fā)者快速構建項目的工具，通過腳手架可以配置開發(fā)所需要的依賴，可以選用各種預編譯語言和組件庫等快速搭建項目開發(fā)環(huán)境，可以理解為項目模版，里面存在開發(fā)所需的基本文件結構和基礎配置
?二十、Flexbox布局中的 gap
gap能讓flex布局中的元素保持一定的間隔
gap:6px;文章來源：http://www.zghlxwxcb.cn/news/detail-635182.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-635182.html
到了這里，關于開發(fā)中的花樣玩法（前端打工人須知）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
