日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue.js中的片段使用方法

在 Vue 中實現(xiàn)可訪問性

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

這里的“所有人”包括有著聽覺、認知、神經(jīng)、身體、語言和視覺障礙的人。

為了使諸如屏幕閱讀器之類的輔助技術(shù)能夠解釋網(wǎng)頁和應(yīng)用程序，無障礙支持是必需的。為了使這些技術(shù)起作用，開發(fā)人員需要考慮可訪問性。

開始之前

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

在開始之前，這是你應(yīng)該已經(jīng)具備的一些先決條件。

你需要：

  • 安裝了 Node.js 10.x 或更高版本。你可以通過在終端或命令提示符下運行 node -v來驗證。
  • 安裝了 Node Package Manager 6.7 或更高版本(NPM)。
  • 代碼編輯器：強烈建議使用 Visual Studio 代碼。
  • Vue 的最新版本已在你的計算機上全局安裝。

在你的計算機上安裝了 Vue CLI 3.0。為此，請先卸載舊的CLI版本：

 
 
 
 
    
  
  
  
  
  1. npm uninstall -g vue-cli 
    2.

然后安裝新的：

 
 
 
 
    
  
  
  
  
  1. npm install -g @vue/cli 
    2.

要么

  • 在這里下載 Vue 入門項目(https://github.com/viclotana/vue-canvas)
  • 解壓縮下載的項目

進入解壓目錄運行以下命令使所有依賴項保持最新：

 
 
 
 
    
  
  
  
  
  1. npm install 
    2.

問題：多個根節(jié)點

在 Vue 組件的模板部分內(nèi)構(gòu)建內(nèi)容時，你可能會注意到，模板標簽內(nèi)只能有一個根 HTML 標簽。

在這個根 HTML 標記內(nèi)，你可以根據(jù)需要創(chuàng)建任意數(shù)量的子節(jié)點，因此在 Vue 組件中不能有多個根節(jié)點。

如果你用 VS Code 打開了項目，請導(dǎo)航到 src 文件夾，然后導(dǎo)航到 components 文件夾，打開 app.js 文件。你的 app.js文件應(yīng)如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

你會看到，保存時，Vue 編譯器將會提示有關(guān)具有多個根節(jié)點的錯誤。

額外的節(jié)點包裝器技術(shù)

為了找到解決方法，Vue 開發(fā)人員經(jīng)常會創(chuàng)建一個額外的(而且?guī)缀跏遣槐匾?根節(jié)點包裝器，在其中可以創(chuàng)建適合的子節(jié)點。

這里的標簽可以是 span 或 div 標簽。大多數(shù) Vue 開發(fā)人員經(jīng)常使用 div 標簽來確保他們的代碼塊不會產(chǎn)生導(dǎo)致破壞程序的錯誤。

這些額外的標簽除了防止產(chǎn)生錯誤外，什么也不做。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

現(xiàn)在根據(jù) HTML 指南，諸如列表項之類的語義標簽應(yīng)該使用有序或無序列表標簽進行包裝。同樣，table 項應(yīng)由 table 標簽包裝為父標簽。

Demo

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

打開你的 App.vue 文件，然后在模板部分中復(fù)制以下代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

但是，如果你在 devtools 中檢查元素，則會發(fā)現(xiàn)它不返回語義 HTML。

如果不遵循這個語義，則你的 HTML 代碼可能會正常運行，但不會被屏幕閱讀器或語音轉(zhuǎn)換之類的輔助設(shè)備接收。

這就是為什么這種方法(被廣泛使用)現(xiàn)在不被接受的原因。通常人們傾向于編寫可訪問的代碼。

解決方案：片段

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

該團隊找到了一種創(chuàng)建 HTML 標記的方法，該方法不會被 DOM 讀取為節(jié)點，并將其稱為片段。

它的工作原理與 div 或 span 標記完全相同，但不會改變代碼的整體結(jié)構(gòu)，因此保持了 DOM 樹的語義。

React 片段語法

 
 
 
 
    
  
  
  
  
  1. render() { 
    2.   
  
  
  
  2.     return (  
    3.   
  
  
  
  3.         
    4.   
  
  
  
  4.           
    5.   
  
  
  
  5.           
    6.   
  
  
  
  6.           
    7.   
  
  
  
  7.         
    8.   
  
  
  
  8.     ); 
    9.   
  
  
  
  9. } 
    10.

在DOM中，如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

片段是不可見的包裝器標簽，不影響 DOM 的節(jié)點結(jié)構(gòu)，從而實現(xiàn)了可訪問性。

Vue 中的 片段

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

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

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

語法如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.   
    6.

在 DOM 中，其渲染結(jié)果如下：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.   
    6.

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

 
 
 
 
    
  
  
  
  
  1. npm install -s vue-fragment 
    2.

然后導(dǎo)入它，你就可以在 Test.vue 文件中使用了，如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

你可以看到div標簽已被片段替換。現(xiàn)在，整個演示文稿都可以訪問了。

總結(jié)

在本文中，你學(xué)習(xí)了如何在 Vue 中使用片段，并了解了為什么在寫代碼時要考慮可訪問性是非常重要的。

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

Julien 的插件是一個非常有用的插件，你現(xiàn)在就能用。


分享名稱：Vue.js中的片段使用方法
本文路徑：http://www.dlmjj.cn/article/dhodjdp.html