vue案例改造

learning 發布于2019-08-20 16:42 / 1048人閱讀

摘要：這個主頁比較簡單，結構簡潔，特效全是很適合做第一個改寫的案例。

這是第一個改造的案例，僅根據自己所學的進行部分的重寫
首先拿到公司的之前的奧克斯的一個主頁。這個主頁比較簡單，結構簡潔，特效全是css3
很適合做第一個改寫的案例。
說干就干
1.banner部分配合swiper插件的改寫

這里用到了swiper插件，只要寫對html結構，已經樣式再調用swiper實例就行了
那么用Vue該如何寫呢？
這種多個相同的結構的第一時間就想到了v-for，
首先先new一個vue實例吧
再模擬下數據寫個json文件

這個實例里圖片顯示是用背景的形式，這和平常直接插入圖片有點不同。
那就簡單粗暴給五個設置背景

背景樣式設置好就該去改寫html部分啦

v-for 遍歷，綁定一個key值，并用v-bind 綁定一個swiperlist的樣式
在vue實例里面data里面定義一個空數組

在motheds里面定義一個填寫數據的方法：

在mounted里面再調用這個函數：

這樣初步的結構就渲染到頁面上啦

云服務器 GPU云服務器社區改造改造進行改造私有云改造

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83107.html

DIY 一個 Vuex 持久化插件

摘要：接下來我們會從上述兩個功能點出發，完成一個持久化插件。在我們的持久化插件中，就是在這個函數內部對數據進行持久化操作。而則整個被監聽，所以任何對于的改動都會被持久化并能夠被恢復。在做 Vue 相關項目的時候，總會遇到因為頁面刷新導致 Store 內容丟失的情況。復雜的項目往往涉及大量的狀態需要管理，如果僅因為一次刷新就需要全部重新獲取，代價也未免太大了。那么我們能不能對這些狀態進行本...

Half 2019-08-26 13:42 評論0 收藏0
2017年TOP100summit15位大咖擔任聯席主席甄選最值得學習的100個研發案例

摘要：以下將分別從五大技術專場維度介紹本屆峰會的部分聯席主席與精選案例。天時間集中分享年最值得學習的個研發案例實踐。從萬維網到物聯網，從信息傳播到人工智能，20年間軟件研發行業趨勢發生了翻天覆地的變化。大數據、云計算、AI等新興領域逐漸改變我們的生活方式，Devops、容器、深度學習、敏捷等技術方式和工作理念對軟件研發從業者提出更高要求。由麥思博（msup）有限公司主辦的第六屆全球軟件案...

andot 2019-06-26 18:17 評論0 收藏0
Vue現有項目改造為Nuxt項目

摘要：好了，項目啟動了，目錄結構也清楚了，接下來就是整個現有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題公司項目，最初只為了實現前后端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化。本人第一次接觸SEO的優化，完全...

Invoker 2019-08-26 10:25 評論0 收藏0
程序員練級攻略（2018）：前端性能優化和框架

摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱陳皓老師在極客上的專欄《左耳聽風》...

VEIGHTZ 2019-08-02 12:04 評論0 收藏0