資訊專欄INFORMATION COLUMN
摘要：容器里面包含部分，其一為提供過(guò)濾器的入口其二為表格組件。數(shù)據(jù)綁定，簡(jiǎn)寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊(cè)組件的語(yǔ)法糖。下次還是上動(dòng)圖吧以后基本上碰到這種使用表格呈現(xiàn)數(shù)據(jù)的組件。
在項(xiàng)目當(dāng)中，經(jīng)常會(huì)有表格組件，包含2部分，其一為table-header,其二為table-content
然后在這個(gè)小demo里面涉及到了vue的個(gè)別指令: v-for v-model v-bind等。還有父組件和子組建的數(shù)據(jù)共享，過(guò)濾器等功能。
HTML模板:
- {{item}}
{{item.a}}
{{item.b}}
{{item.c}}
{{item.d}}
首先在模板文件里面：
#global-table提供了模板容器，同時(shí)提供了vue實(shí)例化的選擇符。容器里面包含2部分，其一為input提供過(guò)濾器的入口,其二為demo-grid表格組件。
這時(shí)HTML5提供的模板標(biāo)簽，可以寫在html文件里面，但是不在網(wǎng)頁(yè)上面出現(xiàn)。可通過(guò)選擇符獲取模板.
v-for 基于原數(shù)據(jù)將元素或者模板塊重復(fù)數(shù)次。
v-bind 數(shù)據(jù)綁定，簡(jiǎn)寫形式為:prop.在父組件和子組件的通訊中，必須要在子組件里面聲明prop。
:prop.sync提供雙向綁定(只能用于prop綁定)
:prop.once提供單向綁定(只能用于prop綁定)
orderBy name sortKey 按照name來(lái)進(jìn)行排序,sortkey默認(rèn)是1，為升序，sortKey為-1的時(shí)候?yàn)榻敌颉?/p>
filterBy filterKey in name在name這個(gè)過(guò)濾范圍內(nèi)進(jìn)行過(guò)濾
vm實(shí)例化:
new Vue({
el: "#example",
data: {
gridContent: [],
gridHeader: ["目標(biāo)", "日志", "日期", "狀態(tài)"],
AorB: false
}
});
Vue.component("demo-grid", {
template: "#grid-template",
props: {
tableContent: Array,
tableHeader: Array,
isA: Boolean
},
data: function() {
//對(duì)于實(shí)例數(shù)據(jù)的處理
return {
}
},
methods: function() {
changeData: function() {
!this.isA;
if(this.isA) {
return this.tableContent = itemsB;
}
return this.tableContent = itemsA;
}
}
});
new Vue({}) 創(chuàng)造一個(gè)vue的根實(shí)例。這個(gè)實(shí)例事實(shí)上就是vue這個(gè)MVVM模式中的ViewModel.在里面?zhèn)魅氲膶?duì)象包含了數(shù)據(jù)，模板，掛載方法，生命周期鉤子等選項(xiàng)。
#el為實(shí)例提供掛載的元素
data object | Function vue實(shí)例的數(shù)據(jù)對(duì)象。如果是編寫Component則必須是Function.
Vue.component({}) 注冊(cè)組件的語(yǔ)法糖。傳入一個(gè)可配置的對(duì)象
template實(shí)例模板。模板默認(rèn)替換掛載元素。如果replace選項(xiàng)為false,模塊將插入掛載元素內(nèi)。本demo就在提供的模板文件。
props Array | Object 使用父組件的數(shù)據(jù)。如果是Object類型的可以進(jìn)行類型檢查，自定義驗(yàn)證，默認(rèn)值等。
methods Object 實(shí)例方法。實(shí)例可以直接訪問這些方法。
//模擬出來(lái)的數(shù)據(jù)
var itemsA = [
{
a: "asdasdsad",
b: 1,
c: 1,
d: 1
},
{
a: "sdfsdfdsfewrw",
b: 2,
c: 2,
d: 2
},
{
a: "sdfsfsdfs",
b: 3,
c: 3,
d: 3
}
];
var itemsB = [
{
a: "sdfsdfsewrewrc",
b: 11,
c: 11,
d: 11
},
{
a: "sdfsdfeewb",
b: 22,
c: 22,
d: 22
},
{
a: "qwewqewwwea",
b: 33,
c: 33,
d: 33
},
];
唉。下次還是上動(dòng)圖吧- -
以后基本上碰到這種使用表格呈現(xiàn)數(shù)據(jù)的組件。直接實(shí)例化一個(gè)vm，在實(shí)例上提供不同的數(shù)據(jù)和方法。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78291.html
摘要：雙嘆號(hào)強(qiáng)制類型轉(zhuǎn)換為布爾值。官方示例代碼用注冊(cè)了全局組件，會(huì)把自動(dòng)注冊(cè)為屬性，所以沒有手動(dòng)寫屬性。如果對(duì)象是響應(yīng)的，將觸發(fā)視圖更新。這是用來(lái)布爾值，又學(xué)了一招和分別代表單擊和雙擊事件綁定。 如果覺得有幫助，歡迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感謝作者 @尤小右 大大邊寫的超級(jí)帶感的 Vue.js 前端框架，贈(zèng)送...
摘要：當(dāng)你將一系列的特性選擇完畢后最后回提示你是否將已選項(xiàng)保存成一個(gè)快速將來(lái)可復(fù)用的當(dāng)你選擇保存時(shí)，被保存的將會(huì)存在用戶的目錄下一個(gè)名為的文件里。 準(zhǔn)備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過(guò)vue --version來(lái)驗(yàn)證是否安裝成功 項(xiàng)目創(chuàng)建 vue create...
摘要：接下來(lái)來(lái)看一下是如何編寫一個(gè)組件的，在看源碼之前，首先還是要對(duì)他的組件的大致功能有一個(gè)了解，這樣我們?cè)诳丛创a的時(shí)候才會(huì)知道這一段大概實(shí)現(xiàn)了什么功能。最后我實(shí)現(xiàn)的功能文檔以及最終的一個(gè)樣例 在你實(shí)現(xiàn)一個(gè)組件過(guò)程中，一定要注意一下幾點(diǎn) 將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數(shù)中（比如mounted），那么寫出來(lái)的組件代碼將非常丑陋，這樣子寫出的代碼也往往難以維護(hù)。...
摘要：使用可以快速生成一個(gè)項(xiàng)目，其中包含了和以及覆蓋率統(tǒng)計(jì)的配置參考一個(gè)創(chuàng)建測(cè)試腳本的快速方法其他參考資料前端自動(dòng)化測(cè)試概覽測(cè)試之使用對(duì)項(xiàng)目進(jìn)行單元測(cè)試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 測(cè)試可以提供快速反饋，根據(jù)測(cè)試用例覆蓋代碼，從而提升代碼開發(fā)效率和質(zhì)量。根據(jù)投入產(chǎn)出價(jià)值，通常迭代較快的業(yè)務(wù)邏輯不做...
閱讀 3431·2021-10-14 09:42
閱讀 2718·2021-09-08 10:44
閱讀 1300·2021-09-02 10:18
閱讀 3600·2021-08-30 09:43
閱讀 2794·2021-07-29 13:49
閱讀 3719·2019-08-29 17:02
閱讀 1577·2019-08-29 15:09
閱讀 1035·2019-08-29 11:01
