vue案例改造

learning 发布于2019-08-20 16:42 / 971人阅读

摘要：这个主页比较简单，结构简洁，特效全是很适合做第一个改写的案例。

这是第一个改造的案例，仅根据自己所学的进行部分的重写
首先拿到公司的之前的奥克斯的一个主页。这个主页比较简单，结构简洁，特效全是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云服务器云服务器社区改造改造进行改造私有云改造

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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