常用的Vue模式有哪些
這篇文章給大家分享的是有關常用的Vue模式有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
公司主營業(yè)務：網站建設、網站制作、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出蘇仙免費做網站回饋大家。
1.處理加載狀態(tài)
在大型應用程序中，我們可能需要將應用程序劃分為更小的塊，只有在需要時才從服務器加載組件。為了使這一點更容易，Vue允許你將你的組件定義為一個工廠函數(shù)，它異步解析你的組件定義。Vue只有在需要渲染組件時才會觸發(fā)工廠函數(shù)，并將緩存結果，以便將來重新渲染。2.3版本的新功能是，異步組件工廠也可以返回一個如下格式的對象。
const AsyncComponent = () => ({ // 要加載的組件（應為Promise） component: import('./MyComponent.vue'), // 異步組件正在加載時要使用的組件 loading: LoadingComponent, // 加載失敗時使用的組件 error: ErrorComponent, // 顯示加載組件之前的延遲。默認值：200ms。 delay: 200, // 如果提供并超過了超時，則會顯示error組件。默認值:無窮。 timeout: 3000 })通過這種方法，你有額外的加載和錯誤狀態(tài)、組件獲取的延遲和超時等選項。
2.廉價的“v-once”靜態(tài)組件
在Vue中渲染純HTML元素的速度非常快，但有時你可能有一個包含大量靜態(tài)內容的組件。在這種情況下，你可以通過在根元素中添加 v-once 指令來確保它只被評估一次，然后進行緩存，就像這樣。
Vue.component('terms-of-service', { template: ` Terms of Service
... a lot of static content ... ` })
3.遞歸組件
組件可以在自己的模板中遞歸調用自己，但是，它們只能通過 name 選項來調用。
如果你不小心，遞歸組件也可能導致無限循環(huán)：
name: 'stack-overflow', template: '
'
像上面這樣的組件會導致“超過最大堆棧大小”的錯誤，所以要確保遞歸調用是有條件的即(使用 v-if 最終將為 false)
4.內聯(lián)模板
當特殊屬性 inline-template 存在于一個子組件上時，該組件將使用它的內部內容作為它的模板，而不是將其視為分布式內容，這允許更靈活的模板編寫。
These are compiled as the component's own template.
Not parent's transclusion content.
5.動態(tài)指令參數(shù)
指令參數(shù)可以是動態(tài)的。例如，在 v-mydirective:[argument]=“value" 中， argument 可以根據(jù)組件實例中的數(shù)據(jù)屬性更新!這使得我們的自定義指令可以靈活地在整個應用程序中使用。
這是一條指令，其中可以根據(jù)組件實例更新動態(tài)參數(shù)：
Scroll down inside this section ↓
I am pinned onto the page at 200px to the left.
Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data: function () { return { direction: 'left' } } })
6.事件和鍵修飾符
對于 .passive、.capture 和 .once 事件修飾符，Vue提供了可與 on 一起使用的前綴：
例如：
on: { '!click': this.doThisInCapturingMode, '~keyup': this.doThisOnce, '~!mouseover': this.doThisOnceInCapturingMode }對于所有其他的事件和鍵修飾符，不需要專有的前綴，因為你可以在處理程序中使用事件方法。
7.依賴注入(Provide/Inject)
有幾種方法可以讓兩個組件在 Vue 中進行通信，它們各有優(yōu)缺點。在2.2版本中引入的一種新方法是使用Provide/Inject的依賴注入。
這對選項一起使用，允許一個祖先組件作為其所有子孫的依賴注入器，無論組件層次結構有多深，只要它們在同一個父鏈上。如果你熟悉React，這與React的上下文功(context)能非常相似。
// parent component providing 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // child component injecting 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }感謝各位的閱讀！關于“常用的Vue模式有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
當前文章：常用的Vue模式有哪些
地址分享：
http://weahome.cn/article/gjhdoo.html
重慶分公司
重慶分公司
