现代 CSS

Vue

A11Y 101:可访问性审核的几种姿势

在《如何检测和修复可访问性》一文中和大家一起探讨了怎么让开发者在开发过程中检测和修复Web应用可访问性的问题。尽管近63%的开发者没有这方成的习惯,但如果我们想构建一个具有高可访问性的Web网站或Web应用就必须考虑可访问性相关的事项。而可访问性的一个关键方面就是审核(Accessibility Auditing)。了解应用程序是否具备可访问性,其最佳方法就是对其进行测试度量;通过这种方式,可以确定在发布到生产环境之前是否需要进行修改。

CSS 自定义属性在Web组件中的应用

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

Vue指令

Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值({{}})之外还可以使用指令。在上一节中,我们主要学习和探讨了Vue模板相关的知识,在这一节中,我们将一起来了解Vue中的指令。在Vue中,指令基本上类似于添加到模板中的HTML属性。它们都是以v-开头,表示这是一个Vue特殊属性。Vue中的指令主要分为内嵌的指令和自定义指令。另外有一些指令还带有相应的修饰符。接下来我们主要围绕着这些点来展开,咱们先从内嵌的Vue指令开始。

Vue 模板

在Vue中,Vue模板对应的就是Vue中的View(视图)部分,也是Vue重中之一,而在Vue中要了解Vue模板我们就需要从两个方面来着手,其一是Vue的模板语法,其二就是模板渲染。Vue模板语法是Vue中常用的技术之一,除非在应用程序中不用渲染视图或者你的程序直接采用的是渲染函数render())。相较而言,模板语法较简单一点,但对于模板的渲染(模板编译)就会更为复杂一些,如果需要了解模板渲染就需要对Vue的渲染函数,响应式原理之类的要有所了解。

Vue 实例

在刚接触Vue的时候,就知道 实例 在Vue中是一个重要的概念,在学习之后也整理了一篇有关于Vue实例和生命周期的学习笔记。经过一段时间的学习之后,重新再温习了一遍有关于Vue的实例,整理一下,提供给有需要的同学作为参考资料。

Vue新指令:v-slot

slot是Vue组件的一个重要机制,因为它使得完全解耦的组件之间可以灵活地被组合。在《Vue组件内容分发》和《Vue的作用域插槽》文章中我们深入的学习了slot怎么在Vue中的使用,但在Vue 3.0版本为slot引入了一套全新的模版语法。为了更好的从2.x过渡到3.0,Vue的v2.6版本引入了新的slot语法,即 v-slot。接下来我们来学习新指令v-slot的使用。

如何在Vue中构建可重用的Transition

在Vue中的transitionanimation都是一些很棒的东东。它们可以让我们的组件带有一定的动效效果。在《Vue的transition》和《Vue的animation》中分别学习了transitionanimation在Vue组件中的运用。这两个特性可以让Web元元素可以像animation.css库中提供的效果一样,实现一些过渡甚至是简单的动画效果。让整个效果看起来很好。如果我们可以将它们封装到组件中,并且在多个项目中重用,是不是会给我们带来更多的益处呢?在前面两篇文章中,我们了解了在Vue中怎么使用transitionanimation,今天我们来学习几种定义transtion的方法,并且深入研究它们可以真正重用的方法。

如何在Vue项目中使用SVG Icon

Web中对于Icon的使用已经是非常频繁的一件事情了,而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势,但随着技术的革新,其中SVG的图标在Web中的使用也越来越频繁,并且其具备的优势也越来越明显。正因如此,在自己的项目中使用SVG的图标的场景也越来越多,因此,今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

Vue 2.0学习笔记:Vue的transition

动效在Web中一直是一个有争议的问题。动效做得好有助于在你的Web程序上锦上添花,甚至是留住你的用户,也可以具有较好的用户体验;反之,如果动效运用的不好,会给用户带来一种反感,让用户迅速地离开你的应用。怎么提供更友好的动效,并不是今天我们要讨论的重点,我们要讨论的是:在Vue应用程序中如何添加动效?在Vue中,提供了多种方法来给你的运用程序添加动效,比如CSS的transitionanimation动效,以及在Vue的生命周期的钩子函数中操作DOM。甚至你还要以使用第三方动画库,比如GSAPVelocity.js来制作动效。

页面

返回顶部