摘要:静态图片怎么引入对重复元素的遍历产品数据统计数据预测流量分析广告发布在重复的部分用如果某个重复的部分比较分散可用循环,循环是从标签本身就开始的既是的载体,也是与同一个标签的灵活使用遍历的时候可以接受几种赋值方式直接绑定的属性
静态logo图片怎么引入
对重复元素的遍历
productList:{ pc:{ title:"PC产品", list:[ {title:"数据统计",url:"#",hot:false}, {title:"数据预测",url:"#",hot:true}, {title:"流量分析",url:"#",hot:false}, {title:"广告发布",url:"#",hot:true} ] } },
如果某个重复的部分比较分散;可用 循环,循环是从标签本身就开始的
遍历的时候 class 可以接受 几种赋值方式;
//直接绑定item的属性
静态src可以直接写成相对路径
动态src 推荐使用背景图代替;
如果动态src 要写成模板变量,要通过require 函数请求;这样webpack才能打包出正确的路径
board:[ { "title":"开放产品", "description":"开放产品是一款开放产品", url:"#", icon:require("../assets/icon/1.png"), class:"mr15 mb15" } ] icon:require("../assets/icon/1.png") //webpack 可以打包的路径
如果要通过ajax请求mock的的img 目前只找到此方法,把img 放在 static 文件下;写json的时候用绝对路径
slides=[{ "src":"/static/slideShow/pic4.jpg", //static 文件 与index.html 同级 "title":"勇攀高峰", "href":"#" }]使用 vue-resource ajax 数据
安装
cnpm install vue-resource --save
引入
import resource from "vue-resource" Vue.use(resource)
使用
created(){ //创建应用开始的时候; this.$http.get("productList").then(function (data) { console.log(data); },function (err) { console.log(err) }) }本地模拟数据 express
早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,在vue 2.0 中 最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替
具体的配置代码参考这个文章
http://blog.csdn.net/u0122073...
ajax 数据回来后怎么处理export default { data: function () { return { //json数据申请回来之前,模板中其实已经用到了数据结构, //所以,在还没有数据的时候,你就需要先写出数据结构;否则会报错 typeErr productList:{ pc:{ title:"", //先定好的数据结构; list:[] //因为数据中是重复的部分,可以不定义 }, app:{ title:"", list:[] } }, news:[], board:[] } }, created (){ //通过 => 函数,延续this的引入;否者 then() 中的this 并不是指向 实例的this; this.$http.get("/api/productList").then((res)=> { //模拟回来的数据,要看准res的结构;确保读到数据,并复制给this.data; this.productList = res.data.data; },(err)=> { console.log(err) }) this.$http.get("/api/news").then( (res)=> { this.news = res.data.data; }, (err) => { console.log(err) }) this.$http.get("/api/board").then((res)=> { this.board = res.data.data; },(err)=> { console.log(err) }) }, }写一个幻灯片组件
完整的代码是:
父组件
//把资源申请回来 methods:{ slideChange(index){ console.log(index) } }, created (){ this.$http.get("/api/slides").then((res)=> { this.slides = res.data.data; },(err)=> { console.log(err) }) }
幻灯片组件完整代码
需要注意的地方有几个
确保ajax 数据回来后才做渲染
console 出现这种报错,但是模板渲染正常,一切正常
原因就是,ajax 请求的数据还没回到,模板已经开始渲染,所以读不到这个href属性;
处理办法 是加个判断;等数据存在后,再去读值
清楚触发定时器的 vue钩子;
//鼠标进入时 @mouseover="stopEvnet" //鼠标出去时 @mouseout="runEvent"
只用了一次for 循环;区别于与 jq幻灯片的写法
jq的幻灯片 可能我们习惯把 所有图片都先遍历出来,然后 写js 让img-box 滚动;
看vue代码,发现只用了在li 的一次for循环;全部数据 全部依赖于一个变量 imgIndex 读取;改变imgIndex的值,其它数据自动转换;
这是利用了vue的双向绑定机制;只需要更换 index 就会自动 读取出对应的src,达到换图片的目的;
注意for循环以为,读取数据的写法
{{slides[imgIndex].title}}
只写了一个goto 方法实现 点击切换,左右切换
goto 的功能功能,就是点击哪个li,切换到哪个数据;
利用 vue的 计算属性功能:监听一个值,返回一个处理后的值; 监听left 的click 事件;goto到一个 toLeft 的计算值; 实现优雅的切换;
因为 计算属性toRight 可以当做一个数值来使用;所以,计时器切换的时候,模拟点击 right 可以写成
this.timeEv = setInterval(()=> { this.goto(this.toRight) // this.toRight 得到当前img的下一个数据的index },this.time);
切换动画的实现(有点抽象)
让两个相同的图片互斥显示;
slide-trans 负责进入的动画; slide-trans-old 负责移出的动画
初始化的时候,让 isShow = false;就是说,让负责移出的动画的img 先渲染;
goto 的时候,先让 isShow = false 移出动画会被执行,这时的index是当前的图片index;意思是,让当前显示的img执行 移出动画
然后延迟 500毫秒,让isShow = true,移入动画会被执行,这时的index已经改变为 goto 参数的index,意思就是将要跳转到的图片的index,所以,其实就是让 要显示的图片 执行移入动画;
goto (index) { this.isShow = false setTimeout(() => { this.isShow = true this.imgIndex = index }, 500) },
切换动画的写法
动画的过程有几个阶段:
v-enter(进入动作初始状态),
v-enter-active(进入动作到完成进入动作的中间过程)
v-enter-to(进入动作结束的状态)
v-leave(离开动作初始状态),
v-leave-active(离开动作到完成离开动作的中间过程)
v-leave-to(离开动作结束的状态)
参考:https://vuefe.cn/v2/guide/tra...
//slide-trans 动画的 进入动作 到 完成进入动作 的 中间过程,所有动画时间为0.5秒 .slide-trans-enter-active { transition: all .5s; } // 进入动作初始状态 translateX(730px) .slide-trans-enter { transform: translateX(730px); } //slide-trans-old动画 离开动作 到 完成离开动作 的中间过程,所有动画时间为0.5秒, // transform: translateX(-730px)为什么写在这里?待了解 .slide-trans-old-leave-active { transition: all .5s; transform: translateX(-730px); }
直观上 enter动画 和 leave 动画是一个相反的过程,所以也可以写成;效果一样;
.slide-trans-old-leave-active { transition: all .5s; } .slide-trans-old-leave-to{ transform: translateX(-730px); }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92603.html
摘要:重构总共耗时个工作日。第一个重构原因就是没有引入静态类型,导致查看一个对象结构需要翻来覆去在多个文件中查找。第三是各个状态模块耦合度高,加大了代码维护难度。但如果耦合度过高,往往是因为模块没有细分到位。这个项目也不列外。 showImg(https://segmentfault.com/img/remote/1460000019660483); 不知不觉已是2019年的7月,恍惚之间已...
摘要:提交是更改状态的唯一方法,并且这个过程是同步的。对于大型应用,我们会希望把相关代码分割到模块中。 vue-cli 脚手架工具的使用 vue-cli 的依赖showImg(https://segmentfault.com/img/bV13r9?w=679&h=316); vue-cli 的使用流程showImg(https://segmentfault.com/img/bV13sh?w=...
摘要:要是使用到日历的话,我们想到使用这个日历类上面仅仅是我个人总结的要点,如果有错误的地方还请大家给我指正。 纳税服务系统总结 纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期,十天的视频课程(想要视频的同学关注我的公众号就可以直接获取了) 我跟着练习一步一步完成需求,才发觉原来Java是这样用来做网站的,Java有那么多的类库,页面...
摘要:纯前端开发主要是针对静态页面。自主权最大,正常是使用进行辅助开发,上线等。大致原因使用是为了和端的保持同步。四总结对于比较正式的项目,前端技术选型策略一定是产品收益最大化,用户在首位。 对于前端团队,可以实现企业受益最大化要点。 一、技术选型的策略 1、保证产品质量 (1)功能稳健:网页不白屏,不错位,不卡死;操作正常;数据精准。 (2)体验优秀:加载体验,交互体验,视觉体验,无障碍访...
阅读 1583·2019-08-29 13:53
阅读 3190·2019-08-29 13:50
阅读 824·2019-08-27 10:51
阅读 542·2019-08-26 18:36
阅读 1711·2019-08-26 11:00
阅读 581·2019-08-26 10:36
阅读 3184·2019-08-23 17:58
阅读 2005·2019-08-23 15:17