# 前端，不只局限于vue！

> 作者/来源: UCloud 运营管理员
> 发布时间: 2023-01-11T05:20:00.000Z
> 分类: 解决方案
> 标签: 存储, Java, 前端
> 原文链接: http://117.50.162.249:3000/yun/articles/850

---

# 前端，不只局限于vue！

> 来源: https://www.ucloud.cn/yun/130009.html
> 作者: IT那活儿
> 发布日期: 发布于2023-01-11 13:20

前端，不只局限于vue！

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_001.png)

点击上方蓝字关注我们

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_001.png)

项目vue入坑已有一年之久，从nodejs的安装到v格式的语法，vue监控数据进行dome回写的架构理念均有无数文章深入介绍。

实际到了应用上大家可能更多遇到的是···这个数据回写怎么没反应？那个效果状态如何实现？这个需求是不是能做出来？

更多涉及到的却涵盖各方各面，针对需求实现，以下列举一些经常被提问到的前端技术，前端可不仅仅只局限于vue！

1.简单动画效果如何实现？

**分为两种：js实现动作交互，css3实现指定动态。**

何谓css3？

对于页面元素实现样式的一套规则标准。css2以及css3其实都是一样的东西。

3就是2的升级版本。性能增加，bug改进，此概念可以类推到html5，所以以后请不要再问我会不会html5了！

大哥们！html5就是html规则的一个版本、版本、版本！

css3+html5很厉害吗？

当然厉害！两套规则发布时间相隔不远，主要在于指导大厂浏览器内核开发，而前端的开发又依赖于浏览器发布出来的css、js接口。

为了适应前端越来越多样化的更迭，新版本较突出的贡献是css加入的动画，html加入画布，多媒体等元素。

**css****如何实现动画效果**

通过@keyframes创建动画。

在@keyframes里指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

把@keyframes创建的动画绑定到一个选择器

如：运行名为myfirst的动画：

div{

animation-name:myfirst;   //调用myfirst定义的动画效果

animation-duration:5s;

animation-timing-function:linear;

animation-delay:2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

}

@keyframesmyfirst  //定义动画效果

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100%{background: red; left:0px; top:0px;}

}

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_002.png)

2.dom有哪些事件接口可以通过js进行编写？

在项目需求里面会经常遇到拖移，点击等等事件的编写。dom里有哪些事件呢？

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_003.png)

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_004.png)

以上是最常用的两类交互事件，在鼠标事件上一个点击事件又存在事件冒泡（内含元素绑定的事件在触发时父级元素事件也会被触发），这种情况需要使用到：

event.stopPropagation();   //阻止事件冒泡到DOM树上

在vue单页面开发中，有时候也会需要对body进行事件的监听，监听方法：

mounted() {

document.body.addEventListener(click,this.functionName, false);

},

beforeDestroy() {

document.body.removeEventListener(click,this. functionName, false);  //取消监听

},

在vue页面销毁之前一定需要将监听事件取消，避免污染其他页面应用，new对象同理。

3.html5中的可视化技术：Canvas和SVG

Canvas画布，利用JavaScript在网页绘制图像，通过.getContext("2d")来在画布中绘制图形。能够以.png和.jpg格式保存存储图像，可以说是位图。

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_005.png)

SVG，可缩放矢量图形（ScalableVector Graphics），基于可扩展标记语言XML。

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_006.png)

svg中的每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作，Canvas就像动画，每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。

通常大数据可视化项目中这两类技术应用比较常见，比如地图绘制可以通过svg，密集型图形化动画绘制可以使用Canvas。

4.元素在页面中的定位position

将html元素指定到页面中的固定位置这就是css中的position属性。

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_007.png)

在应用transform样式的dom中的fixed定位，父级元素将不再指向浏览器，而是应用了transform样式的dom元素

通过设定元素的z-index值，能强制对绝对定位的元素进行图层的排布，相当于三维中的z轴，数字越大，位置越浮于上。

5.定时器疯狂点击队列问题

在页面没有刷新的时候，通过setTimeout定义的定时器会一直存在，即便在dom销毁的状态下，也会一直触发定时事件，这就需要开发中一定要记得对其进行销毁动作。

varaction=setTimeout(function(){...},1000);   //使用变量action接收定时器名称

if(action)clearTimeout(action);    //判断定时器是否存在,有的话就清除

6.技术图谱

最后给大家提供一张前端的技术图谱，有兴趣的可以从头了解起！

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_008.png)

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_009.png)

END

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130009/images/130009_010.png)