vue學習指南3

2021-08-03 22:55:44 字數 2190 閱讀 6120

2.9 元件

元件可以擴充套件 html 元素,封裝可重用的**。在較高層面上,元件是自定義元素;通過vue.component()介面將大型應用拆分為各個元件,從而使**更好具有維護性、復用性以及可讀性。

註冊元件

my-component>

div>

vue.component('my-component',)

data:})

解讀:

區域性註冊元件

heading>

my-component>

div>

vue.component('my-component',);

var child=;

components:

});解讀:

特殊dom模板將會限制元件的渲染

像這些包含固定樣式的元素

使用props實現父元件向子元件傳遞資料

some-text='hello'>

child>

v-bind:some-text='message'>

child>

div>

vue.component('child',

} div>',props:['sometext']

});, data:

});

解讀:

父元件是使用 props 傳遞資料給子元件,但如果子元件要把資料傳遞回去則使用自定義事件!

}

'incrementtotal'>

'incrementtotal'>

vue.component('button-counter',}',

data:function

() },

methods:

}})data:,

methods:

}})解讀:

使用slots分發內容

i'm the parent titleh1>

this is some original contentp>

this is some more original contentp>

my-component>

div>

vue.component('my-component',);

data:

});

解讀:

class="container">

name="header">

slot>

header>

slot>

main>

name="footer">

slot>

footer>

div>

//父元件模板

slot="header">here might be a page titleh1>

a paragraph for the main content.p>

and another one.p>

slot="footer">here's some contact infop>

//渲染結果

class="container">

here might be a page titleh1>

header>

a paragraph for the main content.p>

and another one.p>

main>

here's some contact infop>

footer>

div>

解讀:

2.10 vue-resource外掛程式

使用vue-rescource實現前後端的通訊

在vue例項中新增ready物件,當頁面完成載入時發出請求

new vue().error(function

(data, status, request)

) //post方法:this.$http.post(url,postdata,function callback)

},data: ,

解讀:

Linux 學習指南

第乙個話題,嵌入式學習的路徑有哪些.這是乙個初學者常問的問題,也是初學者問嵌入式該如何入門的根源.我感覺有兩個方面,偏硬和偏軟.我不認為嵌入式開發軟體佔絕對比重,相反,軟硬體都懂,才是嵌入式高手所應該追求的,也是高手的必由之路.硬體道路 第一步 pcb設計,一般為開發板的電路裁減和擴充,由開發板原理...

Perl學習指南

首先,請考慮如下問題 如果你學過其他語言,那就可以從學習 perl 的語法開始 perl語言入門 或者是從 perl 的自帶文件。當你對 perl 的語法了解後,嘗試書中的例子,試著寫一些簡單的程式。很快你就會發現 perl 和你以前學過的語言類似。如果你是乙個有經驗的程式設計師,你可能直接會從讀程...

SAP HANA 學習指南

sap hana 學習指南 第一部分 sap hana 概覽 第二部分 sap hana資料庫體系結構 2.1 體系結構概覽 2.2 記憶體結構 2.3 sap hana 多版本併發控制 sap hana mvcc 2.4 列儲存 column store 2.5 行儲存 row store 2.6...