真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue代碼的實用技巧有哪些

本篇內(nèi)容介紹了“Vue代碼的實用技巧有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元潮南做網(wǎng)站,已為上家服務(wù),為潮南各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

slots 新語法向 3.0 看齊

?使用帶有“#”的新命名插槽縮寫語法,在Vue 2.6.0+中可用??

Vue代碼的實用技巧有哪些

舉個例子:

構(gòu)建插槽時，最好規(guī)劃一下布局。這就是我的文章布局。

Vue代碼的實用技巧有哪些

構(gòu)建插槽與構(gòu)建組件沒有什么不同。本質(zhì)上，插槽是具有超強功能的組件,讓我們細分一下上面的布局，組件的外觀如下：

              
I am the content
                  
I am the footer
                                    
I am the banner
            //簡寫   Default slot  

動態(tài)參數(shù)預(yù)期會求出一個字符串，異常情況下值為 null。這個特殊的 null  值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會觸發(fā)一個警告。

  ... 

變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種復(fù)雜表達式。

@hook那些事

處理組件內(nèi)定時器的步驟。通常我們一般都是這樣操作的：

但是其實更好的做法是：

設(shè)想一個場景如果我們需要在數(shù)據(jù)渲染到頁面的之前讓頁面 loading。mounted 之后停止loading。beforeUpdata 時開始  loading。updatad 之后停止 loading。

最簡單的方法就是改寫組件的生命周期函數(shù)，使其在 mounted/beforeUpdata /updatad時通知父組件顯示或者隱藏  loading。

這樣做顯示不好，因為侵入了自組件的邏輯，增加的邏輯也和組件本身的功能好不關(guān)聯(lián)。最好的辦法就是使用 v-on="hook:xxx" 的方式：

這樣，就實現(xiàn)了對子組件生命周期的監(jiān)聽。對任意的組件都有效果，包括引入的第三方組件。

vue中的$props、$attrs和$listeners(可用來二次封裝組件)

?$props：當(dāng)前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。?

假如有個input輸入框。我們有很多的原生屬性，比如：name、placeholder、disabled等等。我們?nèi)绻级x在props顯示接收，未免太過繁瑣。所以官網(wǎng)出現(xiàn)了：v-bind="$props"這樣的操作。如果父組件傳遞很多的原生屬性，那么我們在子組件中直接可以：

//good    //bad //而不是下面這樣，如果很多的屬性就特別繁瑣 

?我們可以利用以下方式$attrs 將原生屬性直接傳遞給子組件,這是Vue在2.4.0新增的屬性,包含了父作用域中不作為 prop 被識別 (且獲取)  的特性綁定 (class 和 style 除外)。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style  除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。?

?$listeners：包含了父作用域中的 (不含 .native修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners"  傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用。?

如果子組件不在父組件的根目錄下，則可以將所有事件偵聽器從父組件傳遞到子組件，如下所示：

響應(yīng)式數(shù)據(jù)(2.6.0新增)

我們習(xí)慣于用Vuex去解決狀態(tài)的共享問題,但是在小項目中使用就會有增大代碼體積和將代碼復(fù)雜化的煩惱,所以在后來的版本中Vue新增

Vue.observable( object )讓一個對象可響應(yīng),Vue 內(nèi)部會用它來處理 data 函數(shù)返回的對象。

返回的對象可以直接用于渲染函數(shù)和 計算屬性 內(nèi)，并且會在發(fā)生改變時觸發(fā)相應(yīng)的更新。也可以作為最小化的跨組件狀態(tài)存儲器，用于簡單的場景：

官方示例:

const state = Vue.observable({ count: 0 })  const Demo = {   render(h) {     return h('button', {       on: { click: () => { state.count++ }}     }, `count is: ${state.count}`)   } }

jsx模板組件

以下面的一組狀態(tài)判斷按鈕為例,我們很容易就下意識地在模板內(nèi)寫下這種代碼

未開始 進行中 可領(lǐng)取 已領(lǐng)取

但是如果我們利用渲染函數(shù)可以將上面的代碼抽取成優(yōu)雅的使用組件

                      
             

我們將所有的邏輯封裝進渲染函數(shù)內(nèi),外部只需要傳遞一個狀態(tài)參數(shù)即可改變

動態(tài)組件

?通過 Vue 的 元素加一個特殊的 is attribute 可以實現(xiàn)動態(tài)組件的效果?

如圖，這是一個v-for渲染的列表(只是目前這個版塊才剛開始做，目前只有一個)，圓圈內(nèi)的就是一個組件，也就是要v-for動態(tài)組件

Vue代碼的實用技巧有哪些

實際使用

一開始就是基本的組件引入了

import ColorIn from '@/components/Magic/ColorIn.vue' import LineIn from "@/components/Magic/LineIn.vue"; import Header from "@/components/Magic/Header.vue"; import Footer from "@/components/Magic/Footer.vue";  export default{       components:{         ColorIn,         LineIn,         Header,         Footer     } }

接下來就是動態(tài)v-for動態(tài)組件的使用，componentList:['ColorIn','LineIn','Header','Footer']使用下面的代碼即可將代碼依次循環(huán)

編譯以后的效果就是

  
 

Vue.filter

?簡單介紹一下過濾器，顧名思義，過濾就是一個數(shù)據(jù)經(jīng)過了這個過濾之后出來另一樣?xùn)|西，可以是從中取得你想要的，或者給那個數(shù)據(jù)添加點什么裝飾，那么過濾器則是過濾的工具。例如，從['abc','abd','ade']數(shù)組中取得包含‘ab’的值，那么可通過過濾器篩選出來‘abc’和‘abd’;把‘Hello’變成‘Hello  World’，那么可用過濾器給值‘Hello’后面添加上‘ World’;或者把時間節(jié)點改為時間戳等等都可以使用過濾器。?

場景:時間戳轉(zhuǎn)化成年月日這是一個公共方法,所以可以抽離成過濾器使用

// 使用 // 在雙花括號中 {{ message | capitalize }}  // 在 `v-bind` 中 
  // 全局注冊 Vue.filter('stampToYYMMDD', (value) =>{   // 處理邏輯 })  // 局部注冊 filters: {   stampToYYMMDD: (value)=> {     // 處理邏輯   } }  // 多個過濾器全局注冊 // /src/common/filters.js let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') export { dateServer } // /src/main.js import * as custom from './common/filters/custom' Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

.sync 語法糖

?sync 就是為了實現(xiàn)prop 進行“雙向綁定”僅此而已(父對子，子對父，來回傳)?

當(dāng)你有需要在子組件修改父組件值的時候這個方法很好用，它的實現(xiàn)機制和v-model是一樣的。

Vue代碼的實用技巧有哪些

利用 object.freeze 提升性能

?Object.freeze()  方法可以凍結(jié)一個對象。一個被凍結(jié)的對象再也不能被修改;凍結(jié)了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個對象后該對象的原型也不能被修改。freeze()  返回和傳入的參數(shù)相同的對象。?

比方我們需要渲染一個非常大的數(shù)組對象，例如用戶列表，對象列表，文章列表等等。

export default {   data: () => ({     users: {}   }),   async created() {     const users = await axios.get("/api/users");     this.users = users;   } };

vue 會將 data 對象中的所有的屬性加入到 vue 的響應(yīng)式系統(tǒng)中，當(dāng)這些屬性的值發(fā)生改變時，視圖將會產(chǎn)生  響應(yīng)，若對象的體積比較大，會消耗很多瀏覽器解析時間。

所以我們可以通過減少數(shù)據(jù)的響應(yīng)式轉(zhuǎn)換來提供前端的性能。

export default {   data: () => ({     users: {}   }),   async created() {     const users = await axios.get("/api/users");     this.users = Object.freeze(users);   } };

“Vue代碼的實用技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！


網(wǎng)頁名稱：Vue代碼的實用技巧有哪些
網(wǎng)站URL：http://weahome.cn/article/jdegjo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部