日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

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

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

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

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

開始之前

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

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

你需要：

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

在你的計(jì)算機(jī)上安裝了 Vue CLI 3.0。為此，請(qǐng)先卸載舊的CLI版本：

 
 
 
 
    
  
  
  
  
  1. npm uninstall -g vue-cli 
    2.

然后安裝新的：

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

要么

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

進(jìn)入解壓目錄運(yùn)行以下命令使所有依賴項(xiàng)保持最新：

 
 
 
 
    
  
  
  
  
  1. npm install 
    2.

問題：多個(gè)根節(jié)點(diǎn)

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

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

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

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

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

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

你會(huì)看到，保存時(shí)，Vue 編譯器將會(huì)提示有關(guān)具有多個(gè)根節(jié)點(diǎn)的錯(cuò)誤。

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

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

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

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

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

這個(gè)方法的問題在于它不可訪問。

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

Demo

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

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

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

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

解決方案：片段

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

該團(tuán)隊(duì)找到了一種創(chuàng)建 HTML 標(biāo)記的方法，該方法不會(huì)被 DOM 讀取為節(jié)點(diǎn)，并將其稱為片段。

它的工作原理與 div 或 span 標(biāo)記完全相同，但不會(huì)改變代碼的整體結(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.

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

Vue 中的 片段

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

這個(gè)插件就像包裝器一樣。然后在 Vue 編譯時(shí)，它會(huì)在 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 具有語義并且可以訪問代碼。要使用它，請(qǐng)先在你的 Vue 項(xiàng)目中安裝插件：

 
 
 
 
    
  
  
  
  
  1. npm install -s vue-fragment 
    2.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

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

總結(jié)

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

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

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


本文標(biāo)題：Vue.js中的片段使用方法
文章出自：http://m.5511xx.com/article/dhodjdp.html