這是第乙個改造的案例,僅根據自己所學的進行部分的重寫
首先拿到公司的之前的奧克斯的乙個主頁。這個主頁比較簡單,結構簡潔,特效全是css3
很適合做第乙個改寫的案例。
說幹就幹
1.banner部分配合swiper外掛程式的改寫
這裡用到了swiper外掛程式,只要寫對html結構,已經樣式再呼叫swiper例項就行了
那麼用vue該如何寫呢?
這種多個相同的結構的第一時間就想到了v-for,
首先先new乙個vue例項吧
再模擬下資料寫個json檔案
這個例項裡顯示是用背景的形式,這和平常直接插入有點不同。
那就簡單粗暴給五個設定背景
背景樣式設定好就該去改寫html部分啦
v-for 遍歷,繫結乙個key值,並用v-bind 繫結乙個swiperlist的樣式
在vue例項裡面data裡面定義乙個空陣列
在motheds裡面定義乙個填寫資料的方法:
在mounted裡面再呼叫這個函式:
這樣初步的結構就渲染到頁面上啦
Vue 登入案例
這篇文章主要是介紹如何用vue springboot來實現乙個簡單前後端分離的登入案例,比較詳細。apioperation 登入功能 responsebody public result dologin requestparam username string username,requestpar...
vue入門案例
1 技術在迭代,有時候你為了生活沒有辦法,必須掌握一些新的技術,可能你不會或者沒有時間造輪子,那麼就先把利用輪子吧。2 掛載點,模板,例項之前的關係 1239 1011 1213 141516 171819 202140 413 vue中方法的使用以及屬性的改變,vue例項中的資料,事件,方法。12...
前端 vue入門案例
第一步 建立html 檔案 使用vscode快捷鍵 生成html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head body html 第二步 引入v...