Vue 3.0是一款用于构建用户界面的开源JavaScript库,它可以帮助开发者快速构建出高性能、可维护的Web应用程序。Vue 3.0是一个重大升级,它包含了许多新特性,如Composition API、Fragments、Teleport、Portals等,这些特性都有助于开发者更好地创建出功能丰富的Web应用程序。
Vue 3.0入门非常容易,你只需要准备一个HTML文件,然后在其中引入Vue 3.0的脚本文件即可。例如:
<script src="https://unpkg.com/vue@3.0.0-rc.1/dist/vue.js"></script>
然后就可以使用Vue 3.0来创建一个新的Vue实例:
const app = Vue.createApp({});
这样就创建了一个新的Vue实例,你就可以使用它来开始你的Web应用程序开发之旅。此外,你还可以使用Vue CLI来快速搭建一个Vue 3.0项目。
当你已经准备好使用Vue 3.0时,你还需要学习如何使用它来创建Web应用程序。这里有很多不同的方法来学习Vue 3.0,包括读书、观看视频教程、在社区中寻找帮助或者上课学习。不论你选择哪种方法来学习Vue 3.0,都会有很多有趣而有益的内容供你去学习。
总之,学习Vue 3.0并不难,耐心和勤奋是成功之道。如果你想要快速上手并构建出功能丰富的Web应用程序,那么学习Vue 3.0将会是一个很好的选择。
Web 可访问性 (也称为 a11y) 是指创建可供任何人使用的网站的实践方式——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件,还是仅仅是处于不利环境中的人。例如,在视频中添加字幕可以帮助失聪、重听或在嘈杂的环境中听不到手机的用户。同样,请确保文字对比度不要太低,这对低视力用户和那些试图在强光下使用手机的用户都有帮助。
你是否已经准备开始却又无从下手?
可以先看看由万维网联盟 (W3C) 提供的规划和管理 web 可访问性。
你应该在每个页面的顶部添加一个直接指向主内容区域的链接,这样用户就可以跳过在多个网页上重复的内容。
通常这个链接会放在 App.vue
的顶部,这样它就会是所有页面上的第一个可聚焦元素:
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink">跳到主内容</a>
</li>
</ul>
若想在非聚焦状态下隐藏该链接,可以添加以下样式:
.skipLink {
white-space: nowrap;
margin: 1em auto;
top: 0;
position: fixed;
left: 50%;
margin-left: -72px;
opacity: 0;
}
.skipLink:focus {
opacity: 1;
background-color: white;
padding: .5em;
border: 1px solid black;
}
一旦用户改变路由,请将焦点放回到这个跳过链接。通过用如下方式聚焦 ref
即可实现:
<script>
export default {
watch: {
$route() {
this.$refs.skipLink.focus();
}
}
};
</script>
点击此处实现
阅读关于跳跃到主体内容的链接的文档
可访问性最重要的部分之一是确保设计本身是可访问的。设计不仅要考虑颜色对比度、字体选择、文本大小和语言,还要考虑应用程序中内容的结构。
用户可以通过标题在应用程序中进行导航。为应用程序的每个部分设置描述性标题可以让用户更容易地预测每个部分的内容。说到标题,有几个推荐的可访问性实践:
<h1>
- <h6>
关于标题可进一步阅读
<main role="main" aria-labelledby="main-title">
<h1 id="main-title">Main title</h1>
<section aria-labelledby="section-title">
<h2 id="section-title"> Section Title </h2>
<h3>Section Subtitle</h3>
<!-- 内容 -->
</section>
<section aria-labelledby="section-title">
<h2 id="section-title"> Section Title </h2>
<h3>Section Subtitle</h3>
<!-- 内容 -->
<h3>Section Subtitle</h3>
<!-- 内容 -->
</section>
</main>
地标 (landmark) 会为应用中的章节提供访问规划。依赖辅助技术的用户可以跳过内容直接导航到应用程序的每个部分。你可以使用 ARIA role 帮助你实现这个目标。
HTML | ARIA Role | 地标的目的 |
---|---|---|
header | role="banner" | 主标题:页面的标题 |
nav | role="navigation" | 适合用作文档或相关文档导航的链接集合 |
main | role="main" | 文档的主体或中心内容 |
footer | role="contentinfo" | 关于父级文档的信息:脚注/版权/隐私声明链接 |
aside | role="complementary" | 用来支持主内容,同时其自身的内容是相对独立且有意义的 |
无对应元素 | role="search" | 该章节包含整个应用的搜索功能 |
form | role="form" | 表单相关元素的集合 |
section | role="region" | 相关的且用户可能会导航到的内容。必须为该元素提供 label |
Tip:
在使用地标 HTML 元素时,建议加上冗余的地标 role attribute,以最大限度地与传统不支持 HTML5 语义元素的浏览器兼容。
关于地标可进一步阅读
#文档WCAG 2.0WCAG 2.1可访问的富 Internet 应用程序 (WAI-ARIA) 1.2WAI-ARIA 创作实践 1.2#辅助技术屏幕阅读器NVDAVoiceOver[JA...
#概览非兼容:自定义元素白名单现在在模板编译期间执行,应该通过编译器选项而不是运行时配置来配置。非兼容:特定 is prop 用法...
#data类型:Function详细:返回组件实例的 data 对象的函数。在 data 中,我们不建议观察具有自身状态行为的对象,如浏览器 API ...
构造器每个 Vue.js 应用都是通过构造函数Vue创建一个Vue 的根实例启动的:var vm = new Vue({// 选项})虽然没有完全遵循MVVM 模...