一:今天作項目的時候遇到了一個問題,我想讓父元素具備必定的透明度,而對於子元素則不透明,若是咱們簡單的給父元素添加 opacity屬性,實際上子元素會隨着父元素的透明度改變而改變,要實現上面的效果,通過度娘,獲得了一種方法:javascript
1,設置父元素的 html
background : rgba(120,120,120,0.7)//設置的o.7的透明度
關於rgba知識點以下:
語法:
R:紅色值。正整數 | 百分數
G:綠色值。正整數 | 百分數
B:藍色值。正整數| 百分數
A:透明度。取值0~1之間 咱們設置透明度這這兒設置就行了vue
如上:java
二:關於box-sizing的元素dom
咱們知道在很古老以前,對於盒模型分爲兩種,w3c盒模型和IE盒模型,對於box-sizing元素。能夠規定這兩種模型,ide
box-sizing:border-box || content-box函數
content-box:佈局
寬度和高度分別應用到元素的內容框。post
在寬度和高度以外繪製元素的內邊距和邊框。flex
border-box:
爲元素設定的寬度和高度決定了元素的邊框盒。
就是說,爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
三:關於flex佈局
flex佈局可已實現多種佈局,在作項目的時候應用到的下面兩種:
1,使用flex佈局實現的徹底居中,講真,flex佈局實現元素居中很簡單:
父元素:display:flex 規定父元素的flex佈局
子元素:margin:auto
2,對於設定了flex佈局的父元素,若是子元素爲行元素,這個行元素的paddding效果起做用
四:input元素自動得到焦點:
<input type="text" οnfοcus=""onfocus > //不用傻傻的使用js進行了
五:關於js中的箭頭函數:
代碼以下:
new Vue({ el:'#tem', data:{ items:[ {dec:'1'}, {dec:'2'}, {dec:'3'} ] }, methods:{ pushData:function () { console.log('made'); this.items.unshift(' '); console.log('good'); this.$refs.slideUl.querySelector('li').className='active'; } }, mounted: function () { setInterval(() => { this.pushData(); },3000) }
如上:
在上面的代碼中,咱們想要當實例加載的時候執行setInterval 每隔3秒鐘執行pushData()函數,這是使用箭頭函數定義的,當我想用
setInterval(function () {
this.pushData()
},3000)
這段代碼來實現的時候卻出現了錯誤,console控制檯提示 函數pushData沒有定義,爲何?由於this的指向,在這個函數中,其實是每隔3s鐘調用一個匿名函數,在匿名函數中,this指向全局環境,而咱們在vue中定義的methods其實是定義掛載在dom元素實例上的,固然全局環境中就沒有定義了,實際上使用箭頭函數能夠解決這個問題