●scoped 屬性

? ? ?HTML5?中的新屬性(布爾屬性)。如果使用該屬性，則樣式僅僅應(yīng)用到 style 元素的父元素及其子元素。父組件的樣式將不會滲透到子組件中。

? ? ?實現(xiàn)組件的私有化，不對全局造成樣式污染，表示當(dāng)前style屬性只屬于當(dāng)前模塊。

●CSS動畫

? ? ?動畫允許元素從一種樣式逐漸變?yōu)榱硪环N樣式?？梢愿鶕?jù)需要多次更改所需的CSS屬性。要使用CSS動畫，必須首先為動畫指定一些關(guān)鍵幀。

? ? ?關(guān)鍵幀保持元素在特定時間具有的樣式。

要使用關(guān)鍵幀，先創(chuàng)建一個帶名稱的?@keyframes?規(guī)則，對使用?animation-name?屬性將動畫同其關(guān)鍵幀聲明匹配。每個?@keyframes?規(guī)則包含多個關(guān)鍵幀，也就是一段樣式塊語句，每個關(guān)鍵幀有一個百分比值作為名稱，代表在動畫進(jìn)行中，在哪個階段觸發(fā)這個幀所包含的樣式。

? ? ?可以按任意順序列出關(guān)鍵幀百分比；它們將按照其應(yīng)該發(fā)生的順序來處理。

@keyframes規(guī)則

? ? ?在@keyframes規(guī)則中指定CSS樣式時，動畫將在特定時間逐漸從當(dāng)前樣式更改為新樣式。要使動畫生效，必須將動畫綁定到元素。

? ? from等價于?0%。

? ? to等價于?100%。

如果多個關(guān)鍵幀使用同一個名稱，以最后一次定義的為準(zhǔn)。?

@keyframes?不存在層疊樣式的情況，所以動畫在一個階段只會使用一個的關(guān)鍵幀的數(shù)據(jù)。

●Vue中的事件修飾符：

1.prevent:阻止默認(rèn)事件(常用)(加了它，點(diǎn)擊不會跳轉(zhuǎn)；不加，點(diǎn)擊會跳轉(zhuǎn))；

2.stop：阻止事件冒泡(常用)(不加，showInfo中的彈窗會執(zhí)行兩次；加了，showInfo中的彈窗只執(zhí)行一次)；

3.once:事件只觸發(fā)一次(常用)；

4.capture：使用事件的捕獲模式；

5.self：只有event.target是當(dāng)前操作的元素時才觸發(fā)事件；

6.passive：事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢；

●鍵盤事件

.Vue中常用的按鍵別名：

回車 => enter

刪除 => delete (捕獲“刪除”和“退格”鍵)

退出 => esc

空格 => space

換行 => tab(特殊，必須配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case(短橫線命名)

3.系統(tǒng)修飾鍵(用法特殊)：ctr1、alt、shift、meta

(1).配合keyup使用：按下修飾健的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。

(2).配合keydown使用：正常觸發(fā)事件。

4.Vue.config.keyCodes.自定義鍵名=鍵碼，可以去定制按鍵別名

●Vue Router

? ? ?Vue.js 官方的路由管理器。

?相關(guān)配置

①首先引入vue和vue-router：

? ? ?import Vue from "vue";

? ? ?import VueRouter from "vue-router";

②再告知Vue使用vue-router

? ? ?Vue.use(VueRouter);

③定義一個新的VueRouter，并export到外面，方便在mian.js中的new Vue中注冊。

const router = new VueRouter({

? mode: "history",

? base: process.env.BASE_URL,

? routes

});

export default router;

④new VueRouter有三個參數(shù)。

? ? mode代表路由模式，它的默認(rèn)值是hash模式，hash模式很丑，且不支持錨定向，所以如果希望有個漂亮的路由或支持錨定向，可以考慮使用history模式。

? ? base代表應(yīng)用的基路徑，process.env.BASE_URL是指從從環(huán)境進(jìn)程中根據(jù)運(yùn)行環(huán)境獲取的api的base_url

? ? routes 則是具體的路由配置列表，這個參數(shù)最核心也最關(guān)鍵

?path：指定當(dāng)前路由的路徑,當(dāng)瀏覽器url與path匹配時router-view就會渲染當(dāng)前route對象指定視圖組件component/components。

? ? Vue的router支持動態(tài)路徑,以?"/:屬性名"形式作為當(dāng)前path字符串中的一部分。這段字符串路由將作為動態(tài)路由匹配真實url上響應(yīng)字符串信息

?component : Component | () => import(組件)：當(dāng)前瀏覽器url與路由的path匹配時所渲染的路由組件

? ? ?路由的懶加載,通過函數(shù)的形式,可以讓項目中哪些不許一開始就要加載的組件,加載到項目中去 ????

? ? ?只有瀏覽器跳轉(zhuǎn)到當(dāng)前路由時,該路由組件才會加載到項目中去 ???

? ? ?減少不必要的加載降低應(yīng)用加載速度和運(yùn)行帶寬

在項目開發(fā)中應(yīng)用中不需要一開始就加載的路由組件請使用懶加載

?name:?給路由命名,讓路由成為具名路由。路由的導(dǎo)航就可以使用name進(jìn)行跳轉(zhuǎn)。（路由使用location導(dǎo)航時只有具名路由可以直接接受pramas傳參）

?redirect： string | Location | Function

? ?重定向路由，當(dāng)前應(yīng)用訪問導(dǎo)航至該路由時，這個路由會（以替換的形式）自動重定向到redirect指定的新路由

? ? ?redirect 支持函數(shù)的形式,該函數(shù)接收一個參數(shù)就是個訪問oldpath時生成的location對象

? ? redirect 函數(shù)的形式必須返回重定向路由的path或location

?props: boolean | Object | Function

? ? ?路由的動態(tài)匹配一般情況下只能通過,this.$route.params獲取動態(tài)匹配到的值。

? ? 當(dāng)設(shè)置props屬性后動態(tài)匹配到的鍵值對可以作為組件props直接傳遞給視圖組件，這樣大大降低組件的耦合性 布爾值。

? ? 如果?props?被設(shè)置為?true，route.params?所有鍵值對將會被設(shè)置為組件props屬性。

? ? ? props對象形式,就是將對象key作為渲染組件props屬性名,value就是對應(yīng)屬性值 。

? ? ? props的函數(shù)寫法接收當(dāng)前路由信息對象作為參數(shù),該函數(shù)會返回一個對象.對象的key就是渲染組件props屬性名,value就是對應(yīng)屬性值 。

?children?: Array[RouteConfig]

嵌套路由，可以給當(dāng)前路由設(shè)置二級路由

?beforeEnter: (to: Route, from: Route, next: Function) => void

? ? ?路由的獨(dú)享守衛(wèi),當(dāng)應(yīng)用將要導(dǎo)航到當(dāng)前路由時,可以使用該守衛(wèi)進(jìn)行一些邏輯運(yùn)算實現(xiàn)是否阻止本次導(dǎo)航。

●history模式和hash模式

? ? vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。

如果不想要很丑的 hash，可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。

?history模式

history ：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定瀏覽器支持）。

? ? ?這兩個方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。

? ? ?只是當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。

?hash模式

hash：?即地址欄 URL 中的 # 符號。

比如這個 URL：http://localhost:8081/#/form hash 的值為 #/form。

特點(diǎn)：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-600642.html

?

?

?

到了這里，關(guān)于第四十四天的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！