vue 项目要点总结（二）

liuhh 发布于2019-08-22 13:54 / 1987人阅读

摘要：静态图片怎么引入对重复元素的遍历产品数据统计数据预测流量分析广告发布在重复的部分用如果某个重复的部分比较分散可用循环，循环是从标签本身就开始的既是的载体，也是与同一个标签的灵活使用遍历的时候可以接受几种赋值方式直接绑定的属性

静态logo图片怎么引入

对重复元素的遍历

 productList:{
    pc:{
            title:"PC产品",
            list:[
              {title:"数据统计",url:"#",hot:false},
              {title:"数据预测",url:"#",hot:true},
              {title:"流量分析",url:"#",hot:false},
              {title:"广告发布",url:"#",hot:true}
            ]
        }
},


  {{productList.pc.title}}
  
    {{item.title}}
    HOT
  

//在重复的部分用v-for

如果某个重复的部分比较分散；可用循环，循环是从标签本身就开始的

{{item.title}}

//li 既是 v-for 的载体， 也是item ；:title="item.title" 与v-for 同一个标签;

:class 的灵活使用

遍历的时候 class 可以接受几种赋值方式；

//直接绑定item的属性



//通过对象的方式配置


//class 是 一个数组；第一项通过对象配置，第二项，利用item.id 拼成特有的字符串类

img src属性路径问题

静态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);
}

云服务器 GPU云服务器 vps日常维护中的一些要点总结外呼项目总结云服务器搬迁项目总结云服务器搭建vue项目

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

转载请注明本文地址：https://www.ucloud.cn/yun/92603.html

记一次前端项目重构要点总结

摘要：重构总共耗时个工作日。第一个重构原因就是没有引入静态类型，导致查看一个对象结构需要翻来覆去在多个文件中查找。第三是各个状态模块耦合度高，加大了代码维护难度。但如果耦合度过高，往往是因为模块没有细分到位。这个项目也不列外。 showImg(https://segmentfault.com/img/remote/1460000019660483); 不知不觉已是2019年的7月，恍惚之间已...

frolc 2019-08-23 18:29 评论0 收藏0
vue 项目开发要点总结

摘要：提交是更改状态的唯一方法，并且这个过程是同步的。对于大型应用，我们会希望把相关代码分割到模块中。 vue-cli 脚手架工具的使用 vue-cli 的依赖showImg(https://segmentfault.com/img/bV13r9?w=679&h=316); vue-cli 的使用流程showImg(https://segmentfault.com/img/bV13sh?w=...

Drummor 2019-08-22 13:51 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
纳税服务系统【总结】

摘要：要是使用到日历的话，我们想到使用这个日历类上面仅仅是我个人总结的要点，如果有错误的地方还请大家给我指正。纳税服务系统总结纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期，十天的视频课程(想要视频的同学关注我的公众号就可以直接获取了) 我跟着练习一步一步完成需求，才发觉原来Java是这样用来做网站的，Java有那么多的类库，页面...

ispring 2019-08-15 14:48 评论0 收藏0
方案设计--如何看待前端框架选型 ?

摘要：纯前端开发主要是针对静态页面。自主权最大，正常是使用进行辅助开发，上线等。大致原因使用是为了和端的保持同步。四总结对于比较正式的项目，前端技术选型策略一定是产品收益最大化，用户在首位。对于前端团队，可以实现企业受益最大化要点。一、技术选型的策略 1、保证产品质量（1）功能稳健：网页不白屏，不错位，不卡死；操作正常；数据精准。（2）体验优秀：加载体验，交互体验，视觉体验，无障碍访...

gnehc 2019-08-23 18:13 评论0 收藏0