今天小編給大家分享一下Vue.js中片段如何使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到邊壩網(wǎng)站設(shè)計(jì)與邊壩網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋邊壩地區(qū)。

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

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

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

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

開始之前

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

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

你需要：

• 安裝了 Node.js 10.x 或更高版本。你可以通過(guò)在終端或命令提示符下運(yùn)行 node -v來(lái)驗(yàn)證。

• 安裝了 Node Package Manager 6.7 或更高版本(NPM)。

• 代碼編輯器：強(qiáng)烈建議使用 Visual Studio 代碼。

• Vue 的最新版本已在你的計(jì)算機(jī)上全局安裝。

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

npm uninstall -g vue-cli

然后安裝新的：

npm install -g @vue/cli

要么

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

• 解壓縮下載的項(xiàng)目

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

npm install

問(wèn)題：多個(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)如下所示：

<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 是模板中唯一的根節(jié)點(diǎn)。如果你嘗試像這樣添加額外的根節(jié)點(diǎn)：

<template> <span>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test msg="Welcome to Your Vue.js App"/>   </div>   <div>     <h2>Header inside root node 2</h2>   </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>

你會(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)簽來(lái)確保他們的代碼塊不會(huì)產(chǎn)生導(dǎo)致破壞程序的錯(cuò)誤。

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

<template> <span>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test msg="Welcome to Your Vue.js App"/>   </div>   <div>     <h2>Header inside root node 2</h2>   </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>

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

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

Demo

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

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

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

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

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

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

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

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

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

解決方案：片段

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

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

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

React 片段語(yǔ)法

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

在DOM中，如下所示：

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

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

Vue 中的 片段

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

這個(gè)插件就像包裝器一樣。然后在 Vue 編譯時(shí)，它會(huì)在 DOM 上被注釋掉。

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

語(yǔ)法如下所示：

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

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

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

你可以看到有兩行被注釋掉了，因此 DOM 具有語(yǔ)義并且可以訪問(wèn)代碼。要使用它，請(qǐng)先在你的 Vue 項(xiàng)目中安裝插件：

npm install -s vue-fragment

然后導(dǎo)入它，你就可以在 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標(biāo)簽已被片段替換?，F(xiàn)在，整個(gè)演示文稿都可以訪問(wèn)了。

以上就是“Vue.js中片段如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：Vue.js中片段如何使用
本文地址：http://chinadenli.net/article18/gidpgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、標(biāo)簽優(yōu)化、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)