Vue.js 中的片段

2020 年 1 月 14 日
筆記

翻譯：瘋狂的技術宅

作者：Nwose Lotanna

來源：logrocket

正文共：1824 字

預計閱讀時間：7分鐘

在本文中將會給你介紹一個令人興奮的概念，它將幫你精通 Vue.js 。

在 Vue 中實現可訪問性

為了實現 Web 上的可訪問性，你需要設計每個人都可以使用的頁面、工具和技術。

這裡的「所有人」包括有著聽覺、認知、神經、身體、語言和視覺障礙的人。

為了使諸如螢幕閱讀器之類的輔助技術能夠解釋網頁和應用程式，無障礙支援是必需的。為了使這些技術起作用，開發人員需要考慮可訪問性。

開始之前

本文適用於使用 Vue.js 的所有級別的前端開發人員，因此不需要了解初學者的概念和安裝過程即可理解這些概念。

在開始之前，這是你應該已經具備的一些先決條件。

你需要：

安裝了 Node.js 10.x 或更高版本。你可以通過在終端或命令提示符下運行 node -v 來驗證。
安裝了 Node Package Manager 6.7 或更高版本（NPM）。
程式碼編輯器：強烈建議使用 Visual Studio 程式碼。
Vue 的最新版本已在你的電腦上全局安裝。
在你的電腦上安裝了 Vue CLI 3.0。為此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli

然後安裝新的：

npm install -g @vue/cli

要麼

在這裡下載 Vue 入門項目（https://github.com/viclotana/vue-canvas）
解壓縮下載的項目
進入解壓目錄運行以下命令使所有依賴項保持最新：

npm install

問題：多個根節點

在 Vue 組件的模板部分內構建內容時，你可能會注意到，模板標籤內只能有一個根 HTML 標籤。

在這個根 HTML 標記內，你可以根據需要創建任意數量的子節點，因此在 Vue 組件中不能有多個根節點。

如果你用 VS Code 打開了項目，請導航到 src 文件夾，然後導航到 components 文件夾，打開 app.js 文件。你的 app.js文件應如下所示：

<template>    <div id="app">      <img alt="Vue logo" src="./assets/logo.png">      <Test msg="Welcome to Your Vue.js App"/>    </div>  </template>  <script>  import Test from './components/Test.vue'  export default {    name: 'app',    components: {      Test    }  }  </script>  <style>  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;  }  </style>

你可以看到 div 是模板中唯一的根節點。如果你嘗試像這樣添加額外的根節點：

<template>  <span>    <div id="app">      <img alt="Vue logo" src="./assets/logo.png">      <Test msg="Welcome to Your Vue.js App"/>    </div>    <div>      <h1>Header inside root node 2</h1>    </div>  </span>  </template>  <script>  import Test from './components/Test.vue'  export default {    name: 'app',    components: {      Test    }  }  </script>  <style>  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;  }  </style>

你會看到，保存時，Vue 編譯器將會提示有關具有多個根節點的錯誤。

Error failed

額外的節點包裝器技術

為了找到解決方法，Vue 開發人員經常會創建一個額外的（而且幾乎是不必要的）根節點包裝器，在其中可以創建適合的子節點。

這裡的標籤可以是 span 或 div 標籤。大多數 Vue 開發人員經常使用 div 標籤來確保他們的程式碼塊不會產生導致破壞程式的錯誤。

這些額外的標籤除了防止產生錯誤外，什麼也不做。

<template>  <span>    <div id="app">      <img alt="Vue logo" src="./assets/logo.png">      <Test msg="Welcome to Your Vue.js App"/>    </div>    <div>      <h1>Header inside root node 2</h1>    </div>  </span>  </template>  <script>  import Test from './components/Test.vue'  export default {    name: 'app',    components: {      Test    }  }  </script>  <style>  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;  }  </style>

這個方法的問題在於它不可訪問。

現在根據 HTML 指南，諸如列表項之類的語義標籤應該使用有序或無序列表標籤進行包裝。同樣，table 項應由 table 標籤包裝為父標籤。

Demo

讓我們用 App.vue 組件來渲染將要在 Test.vue 組件中創建的列表。

打開你的 App.vue 文件，然後在模板部分中複製以下程式碼：

<template>  <span>    <div id="app">      <img alt="Vue logo" src="./assets/logo.png">      <ol>        <Test />      </ol>      </div>  </span>  </template>

然後，在Test.vue組件中，將列表項放入模板部分，如下所示：

<template>  <div>     <li>1. Array method</li>     <li>2. Extra tag method</li>     <li>3. fragments</li>    </div>  </template>

上面的程式碼塊不會由編譯器返回錯誤。實際上，它將被傳遞到 App.vue 組件中以正確渲染列表。

但是，如果你在 devtools 中檢查元素，則會發現它不返回語義 HTML。

Vue

如果不遵循這個語義，則你的 HTML 程式碼可能會正常運行，但不會被螢幕閱讀器或語音轉換之類的輔助設備接收。

這就是為什麼這種方法（被廣泛使用）現在不被接受的原因。通常人們傾向於編寫可訪問的程式碼。

解決方案：片段

這個概念是 React 團隊發布版本 16 時提出的。這是針對開發人員行為造成的可訪問性差距的解決方案。

該團隊找到了一種創建 HTML 標記的方法，該方法不會被 DOM 讀取為節點，並將其稱為片段。

它的工作原理與 div 或 span 標記完全相同，但不會改變程式碼的整體結構，因此保持了 DOM 樹的語義。

React 片段語法

render() {      return (         <React.fragment >           <ChildA / >           <ChildB / >           <ChildC / >         </React.fragment>      );  }

在DOM中，如下所示：

<ChildA / >  <ChildB / >  <ChildC / >

片段是不可見的包裝器標籤，不影響 DOM 的節點結構，從而實現了可訪問性。

Vue 中的片段

Vue團隊尚未完成正式的片段功能，但是 Vue 社區成員 Julien Barbay 構建了一個很棒的插件。

這個插件就像包裝器一樣。然後在 Vue 編譯時，它會在 DOM 上被注釋掉。

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

語法如下所示：

<Fragment >    <ChildA / >    <ChildB / >    <ChildC / >   </Fragment>

在 DOM 中，其渲染結果如下：

<!--Fragment-->    <ChildA / >    <ChildB / >    <ChildC / >   <!--Fragment-->

你可以看到有兩行被注釋掉了，因此 DOM 具有語義並且可以訪問程式碼。要使用它，請先在你的 Vue 項目中安裝插件：

npm install -s vue-fragment

然後導入它，你就可以在 Test.vue 文件中使用了，如下所示：

<template>  <fragment>     <li>1. Array method</li>     <li>2. Extra tag method</li>     <li>3. fragments</li>  </fragment>  </template>  <script>  import { Fragment } from 'vue-fragment'  export default {    name: 'Test',    components: { Fragment },    props: {      msg: String    }  }  </script>

你可以看到div標籤已被片段替換。現在，整個演示文稿都可以訪問了。

Vue div

總結

在本文中，你學習了如何在 Vue 中使用片段，並了解了為什麼在寫程式碼時要考慮可訪問性是非常重要的。

Vue 團隊已承諾在即將發布的 Vue v3 中引入片段功能。

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

原文：https://blog.logrocket.com/fragments-in-vue-js/