Vue.js 中的片段使用方法

在 Vue 中实现可访问性

为了实现 Web 上的可访问性，你需要设计每个人都可以使用的页面、工具和技术。

这里的“所有人”包括有着听觉、认知、神经、身体j T + P X / `、语言和视觉障碍的人。

为了使诸如屏幕阅读器之类的辅助技术能够解释网页和应用程序，无障碍支持是必需的。为了使这M a 4 F a G些技术起作用，开发人员需要考虑可访问性。

开始之前

本文适用于使用 Vue.js 的所有级别的前端开发人员，因此不需要了解初学者的概念和安装过程即可理解这些概念。

在开始之前，这是你应o 2 + i e Q该已经具– # s q $ G备的一些~ Z % ; 1 @先决条件。

你需要：

• 安装了 Node.js 10.x 或更高版本。你可以通过3 n | T ^在终端或命令提示符下运行 node -v来验证。
• 安装了 Node Package Manager 6.3 a & p p7 或更高版本(– – 9 # f ? c o –NPM)。
• 代码编辑器：强烈建T + R h n 1 M U议使用 Visual Studio 代码。
• Vue 的最新版本已在你的计算机上全局安装。

在你的计算机上安{ 6 y ~ 8 ` 0 G装了 Vue CLI 3.0。为此，请先卸载旧的CLI版本：

npmuninstaly S M D t \ Z Hl-gvue-cli

然后安装新的：

npminstall-g@vue/cli

要么

• 在这里下载 Vue 入门项目(https://githuD \ D i | _ 7 0b.com/viclotana/vue-canvas)
• 解压缩下载的项目

进入解压目T Y ^ K录运行以下命令使所有依赖项保持最新：

npminstall

问题：多个根节点

在 Vue 组件的模板部分内构建内容时，你可能会注意到i 1 – 5 ^ ` = –，模板标签内只能有一个根 HTML 标签。

在这* e Q _ ! ( . Y个根 HTML 标记内，你可$ H B I 7 a , \以根据需要创建任意数量的子节点，因此在 Vue 组件中不能有多个根节点。

如果你用 VS Code 打开了项目，请导航到 src 文件夹，然后导航到 componenv : y l T M @ts 文件夹，打T , _ ( T P , 2开 app.js 文件。你的 app.js文件应如下所示：

<template&gx z w r $ | vt;
<divi| D \d="appc : ! K g J 3 (">
<imgalt="Vuelogo"src=A C f ="./assets/logo.png">
<Testmsg="WelcometoYourVue.jsApp"/>
</div>
</template>
<script>
importTestfrom'./cP 6 Z \ \ Qomponents/Test\ w W Y p v l E.vue'
exportdefault{
name:'app',
components:{
Test
}
}
</6 / M / 2script>
<style>
#app{
font-family:'Avenir',Helvetica,Arial,sans-serif;
-webkit-font-sW 2 9 h 9 M { 8moothing:aS v b ` O & T q cntialiased;
-moz-osx-fontX O I t u O E-smoothing:grayscale;
text-align:center;
color:#2c3e50;
margin-top:z m Z60px;
}
</style>

你可以看到 div 是模板中唯一的根节点。如果你尝| $ \ C W试像这样添加额外的根节点：Q ; 9 r _ l v

<template>
<span>
<din p , @vid="app">
<| P # E b F 6 s pimgalt="Vuelogo"src="./c ! T u \ D * \ Oassets/logo.png">
<Testmsg="WelcometoYourVue.jsApp"/>
</div>
<di4 d M Gv>
<h1>HeaderinsM V * Z bide\ ( F C I + } yrootnode2</h1>
</div>
</span>
</template>
<script>
importTestfrom'./components/Test.vue'
exportdefault{
name:'apU p k s E $p',
components:{
Test
}
}
</script>
<styf v d } ile>
#app{P ( l W , c
font-family:'Avenir',Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grays d s _ z 1 \ |scale;
text-align:center;
color:#2c3e5m i o ^ ; 5 d b g0;
margin-top:60px;
}
</style>

你会看到，保存时，VuT 6 `e 编译器将会提示有关具有多个根节点的错误。

额外b e X ] I e 3的节点包装u v q s器技术

为了找到解决方法，Vue 开发人员经常会创建一个额外的(而且几乎是不必要的? P ^ ~ 6)根节点包装器，在其中可以创建适合的子节点。

这里的标签可以是 span 或 div 标签。大多数 Vue 开发人员经常使用 div 标签来确_ J Q ) r e n 0 l保他们的代码块不会产生导| 1 a \ 0 l E c致破坏程序的错误。

这些额外的标签除了防止产生错误A X X w * T _外，什么也不做。

<template>0 { f;
<_ B espan>
<divid="app">
<imga] J i * 7lt="VueY O { 3 _logo"src="./assets/logo.png">
<Testmsg="Welcome. W . b v x ItoYourVue.jsApp"n H t j =/>
</div>
<div>
<h1>Headerinsiderootnode2</h1>
<n \ 5 t | 5 F;/div>
<j } ] # o s Z Q/span>
</template>
<script>
importTestfrom'./components/Test.vue'} G & x c w l v ^
expor4 , E / 8 L ~ Ctdefault{
name:'app',
componW G - 7 f Jents:{
TestU / v ,
}
}
</script>
<style>
#app{
font-fam\ R O I G 1ily:'Avenir',Helvetica,Arial,sanw E u ^ As-serif;
-webkit-f~ \ B ) s !ont-smooj 6 a w t L Lthing:G , )antialiased;
-moz-osx-font-smoothing:grayscalE \ F b T 1e;
text-align:center;
color:#2c3e50;
margin-top:60px;
}
</style>

这个方法的问题在于它不可访问。

现在根据 HTML 指南，诸如列表项之类的语义V j y标签应该使用有序或无序列表标签进( f t i y行包装。同样g + ~ T N，table 项应由 table 标签包装为父标签。

Demo

让我们用 App.vue 组件来渲染e { n v ? #将要在 Test.vue 组件中创建的列表。

打开你的 Ak b u _pp.vue 文件，然后在模板部分中复制以下代码：

<template>
&P g d * 4 . Jlt;span>F A J X X t \ 9
<divid="app">
<imgalt="Vuelogo"src="./assets/logo.png">
<ol>
&lk D W h R % a Wt;Test/>
</ol>

<3 S k _ B P ) ^ $;/div>
</span>
</template>

然后，在Test.vue组件中，将列表项放入模板部分，如下所示：

<template>A 2 \ / $
<div>
<li>1.Arraymethod</li>
&O t P q , ult;li>2.Extratagmetho} M K d b 1 { ?d</li>
<li>3.fragments</li>
</div&g- P q { $t% O R;
</template>

上面的代码块不会由编译器返回错误。实际上，它将被传递到 App.vue 组件中以正确渲a } E染列表。

但是，如果你在 devtools 中检查元素，则会发现它不返回语义 HTML。

如果不遵循这个语义，则你的 HTML 代码可能会正常运行，但不会被屏幕阅读器或语音转换之类的辅助设备接收。

这就是为什么这种方法(被广泛使用)s – N U M现在不被接受的原因。通常人们倾向于编写可访问的代码。

解决方案：R P ; q片段

这个概念是 React 团队发布版本 16 时提出的。这是针对开发人员行为造成r y , 2 ] a 0的可访问性差距的解决方案。

该团队找到了一种创建 HTML 标记的方法，该方法不会被 DOM 读取为节点，并将其称为片段。K : ~

它的工作原理与 div 或 span 标记完全相同，但不会改变代码的整体结构r u C = h B ~ w，因此保持了 DOM 树的语义。

React 片段语法

render(){
return(
<React.fragme G ! \ \ E ]ent>
<ChildA/>
<ChildB/>
<ChildC/>
<: W a H/React.fragment>
);
}

在DOM中，如下所示：

<ChildA/>
<ChildB/>
<Chiq e sldC/>

片段是不可见的包装器标签，不影A ~ 0 / & \响 DOM 的节点结构，从而实现了可访问性。

Vue 中的 片段

Vue团队尚未完成正式的片段功能，但是 Vu7 = $ \ a X 0 7e 社区成员 Julien Barbay 构Y c @ $ f v建了一个很棒的插件。

这个插件就像包装器一样。然后在 Vue 编译时，它会在 DOM 上被注释掉。

这是在 Vue 2.x 中使用片段的非常有效的方法

语法L f 0 @ W m s u如下所示：k 5 b / ; ` 4 f

&lv G a g & 8 Tt;Fragment>
<ChildA/>
<ChildB/>
<ChildC/>
</FraS 2 _ 5 D ^ K 2gment>

在 DOM 中，其渲染结果如E v ;下：E : { X

<!--Fragment-->
<ChildA/>
<ChildB/>
<ChildC/>
<!--Fragmenx K B S O Mtm V ( X-->

你可以看到? Y u 8 ] O W有两行R ~ ( 0 U % r被注释掉了，因此 DOM 具有语义并且可以访问代码。要使用它，请先在你的 Vue 项目中安装插件：

npminstall-svue-fragment

然_ [ { * w M w后导入它，你就可以在 Test6 v + 4 p – z.vue 文件中使用了，如下所示：

<template>
<fragment>
<li>1.Arraymethod</li>
<li>2.Extratagmethod</li>
<li>3.fragments</li>
</fragment>
</template>
<script>
import{Fragment}from'vue-fragment# / r 4 I / L w c'
exportdefault{
nam+ K b z t - b N ae:'Test'L X ; q,
components:{Fragment},
props:{
msg:String
}
}
</script>

你可以看到div标签已被片段替换。现在，整个演示文稿都= : @ u # G R l c可以访问了。

总结

在本文中，你学习了如何在 Vue 中使用片段，并/ Z $ 3 # q ]了解了为什么在写代码时要考虑可访问性是非常重要的。

Vue 团队已承诺在即将发布的 Vue v3 中引入片段功能。

Julien 的插件是一个非常有用的插件，你现在就能用。

2512141116@qq.com

链接