vue新手上路

2021-10-21 20:59:00 字數 1607 閱讀 8960

1、position:absolute、relative、fixed和static四種定位方式的理解

(1)static:靜態的,是position的預設值,所以一般要麼position沒有定義預設這個,要麼定義的時候肯定不寫這個;

(2)relative:相對的,用相對定位的元素不管它是否進行移動,元素仍要佔據它原來的位置(佔坑不放)。

(3)absolute:絕對的,多和relative搭配使用(就近原則,父相子絕:父級relative,子級absolute,且定位時是找最近的有position定位的父級)。絕對定位元素的前面或者後面的元素會認為這個元素並不存在,即這個元素「浮」在其他元素上面(跟別人搶上了還)。

(4)fixed:固定的,是相對於瀏覽器視窗而言。(頁面不動它不動,頁面滾動它還不動)。

2、display的方式

(1)display:inline;定義在其上的width和height無效

(2)display:inline-block,塊級元素,可定義width和height,遇到定義行和高無效的時候,可以試試該方法

3、vue的特點

(1)元件化:乙個元件實現乙個單頁面,各個元件之間耦合度低,但相互之間可呼叫

(2)v-model動態繫結資料,可以在頁面上修改實時看到修改效果

(3)執行速度快,每次一儲存一重新整理頁面就可以看到改變,不需要修改一次**跑一次程式

4、vue元件的匯入

(1)定義好子元件,且定義好export default下的name;

(2)在父元件中import name from 『子元件位置』

(3)在父元件的components下宣告該子元件

(4)在父元件的template引用該標籤

5、vue元件路由的使用

(1)在router下的index.js檔案引入要新增路由的元件

(2)在index.js下按照路由格式加入該元件的相關資訊

6、彈性布局:基於盒狀模型:display +position+float(具體內容參考部落格

(1)flex-direction:決定橫排還是豎排

(2)flex-wrap:多個div塊兒,一行排不是否要換行

(3)flex-flow:(1)和(2)的合併

(4)align-items:決定大小不一的div塊兒是上對齊還是下對齊還是上下拉一樣長對齊

(5)align-content:多根軸線的對齊方式,(4)和(5)我沒太用過呢

7、vue實現垂直水平居中(前提先都定義好width和height)

(1)居中元素的父級元素display:flex;居中元素margin:auto;

(2)實現水平垂直居中:display:flex; flex-direction:column; justify-content: center;

8、vue實現水平居中

(1)行內元素:text-align:center;

(2)塊級元素;margin:0 auto;

9、vue實現垂直居中

(1)單行元素:line-height = 父級高度;

(2)塊級元素:父級定義display:inline-block;vertical-align:middle;

以上內容有不完整的歡迎補充!不對的地方請多指教!?

github eclipde 新手上路

首先建立github 或碼雲賬號 二者都能使用但是碼雲較快,畢竟國內的。建議1 使用自己姓名命名的獨一無二的賬號,兩邊都使用同乙個名字賬號,然後密碼相同,這樣後期交叉使用的時候可以少很多煩惱。個人經驗教訓,會敲錯賬號。當然,只用其中乙個的忽略。建議2 使用碼雲,二者操作一致。碼雲是中文,入門快,然後...

PHP新手上路

php的許多特點與其他軟體或者工具有關。利用迄今為止我們所學到的php知識,我們可以試著建立乙個簡單互動的 利用這一過程我們又可以學到不少東西。好吧,我們現在開始專注於乙個典型個人 的建設。標題頁面 front.html 這裡我們有乙個非常簡單的html檔案 歡迎來我的寒舍,雖然這裡現在暫時還沒有什...

PHP新手上路(六)

5.5 計數器 乙個簡單的計數器 function get hitcount counter file 增加一次計數值 count 將新的計數值寫入檔案 fp fopen counter file,w fputs fp,count fclose fp 返回計數值 return count 然後我們更...