Vue.js中的片段

作者：NwoseLotanna一个令人兴奋的概念，将帮助您掌握Vue.js。在Vue中实现可访问性要在Web上实现可访问性，您需要设计每个人都可以使用的页面、工具和技术。这里的“所有人”包括有听觉、认知、神经、身体、语言和视觉障碍的人。需要辅助功能支持才能使屏幕阅读器等辅助技术能够解释网页和应用程序。为了使这些技术发挥作用，开发人员需要考虑可访问性。开始之前本文适用于使用Vue.js的所有级别的前端开发人员，因此不需要初学者的概念和安装过程来理解它们。在开始之前，这里有一些您应该已经具备的先决条件。您需要：安装Node.js10.x或更高版本。您可以通过在终端或命令提示符中运行node-v来验证。安装了节点包管理器6.7或更高版本(NPM)。代码编辑器：强烈推荐使用VisualStudioCode。最新版本的Vue已全局安装在您的计算机上。在您的计算机上安装VueCLI3.0。为此，首先卸载旧的CLI版本：npmuninstall-gvue-cli然后安装新版本：npminstall-g@vue/cli或在此处下载Vue启动项目（https://github.com/viclotana/...)将下载的项目解压到解压后的目录中运行以下命令使所有依赖项保持最新：npminstall问题：多个根节点在Vue组件的模板部分构建内容时，您可能会注意到只有There可以是根HTML标记。在这个根HTML标签内，你可以创建任意数量的子节点，所以你不能在一个Vue组件中有多个根节点。如果您使用VSCode打开项目，请导航到src文件夹，然后导航到components文件夹，然后打开app.js文件。你的app.js文件应该是这样的：可以看到div是模板中唯一的根节点。如果你尝试像这样添加一个额外的根节点：你会看到，在保存的时候，Vue编译器会出现关于有多个根节点的错误。额外的节点包装器技术为了找到解决方法，Vue开发人员通常会创建一个额外的（而且几乎是不必要的）根节点包装器，可以在其中创建适当的子节点。这里的标签可以是span或div标签。大多数Vue开发人员定期使用div标签来确保他们的代码块不会产生会破坏程序的错误。这些额外的标签只是防止错误。这个方法的问题是无法访问。根据HTML准则，列表项等语义标签现在应该用有序或无序列表标签包装。同样，表格项目应该由表格标签作为父标签包装。演示让我们使用App.vue组件来呈现将在Test.vue组件中创建的列表。打开你的App.vue文件并在模板部分复制以下代码：然后，在Test.vue组件中，将列表项放入模板部分，如下所示：上面的代码块不会被编译器返回错误。事实上，它将被传递到App.vue组件中以正确呈现列表。但是，如果您在devtools中检查该元素，它不会返回语义HTML。如果您不遵循此语义，您的HTML代码可能会工作，但不会被屏幕阅读器或语音转语音等辅助设备获取。这就是为什么现在不接受这种方法（广泛使用）的原因。通常人们倾向于编写可访问的代码。解决方案：片段的概念是在React团队发布版本16时引入的。这是针对开发人员操作造成的可访问性差距的解决方案。该团队找到了一种方法来创建不会被DOM读取为节点的HTML标签，并将它们称为片段。它的工作方式与div或span标签完全一样，但不会改变代码的整体结构，从而保持DOM树的语义。React片段语法render(){return();}在DOM中是这样的：片段是一个不可见的包装标签，不影响DOM的节点结构，从而实现无障碍。Vue中的片段Vue团队尚未完成官方片段功能，但Vue社区成员JulienBarbay构建了一个很棒的插件。这个插件就像一个包装器。然后当Vue编译时，它会在DOM上被注释掉。这是在Vue2.x中使用片段的一种非常有效的方法语法如下所示：在DOM中它呈现如下：--Fragment-->可以看到有两行被注释掉了，这样DOM就有语义了，代码也可以访问了。要使用它，首先要在你的Vue项目中安装插件：npminstall-svue-fragment然后导入它，你可以在Test.vue文件中使用它，像这样：可以看到div标签已经被fragment替换了。现在可以访问整个演示文稿。总结在本文中，您了解了如何在Vue中使用片段，以及为什么在编写代码时考虑到可访问性很重要。Vue团队已承诺在即将发布的Vuev3版本中引入片段功能。Julien的插件是一个非常有用的插件，您现在就可以使用。