資訊專欄INFORMATION COLUMN
摘要：用函數(shù)化組件展示一個(gè)根據(jù)數(shù)據(jù)智能選擇不同組件的場景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個(gè)場景程序化地在多個(gè)組件中選擇一個(gè)。
學(xué)習(xí)筆記：函數(shù)化組件函數(shù)化組件
Vue提供了一個(gè)functional的布爾值選項(xiàng)，設(shè)置為true可以使組件無狀態(tài)和無實(shí)例，也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點(diǎn)可以更容易渲染，因?yàn)楹瘮?shù)化組件只是一個(gè)函數(shù)，渲染開銷要小很多。
使用函數(shù)化組件時(shí)，Render函數(shù)提供了第二個(gè)參數(shù)context來提供臨時(shí)上下文。組件需要的data、prop、slots、children、parent都是通過這個(gè)上下文來傳遞。比如this.level要改寫為context.props.level，this.$slots.default改變?yōu)?b>context.children。
用函數(shù)化組件展示一個(gè)根據(jù)數(shù)據(jù)智能選擇不同組件的場景：
See the Pen Vue-函數(shù)化組件-根據(jù)數(shù)據(jù)選擇組件 by whjin (@whjin) on CodePen.
函數(shù)化組件主要適用于以下兩個(gè)場景：
程序化地在多個(gè)組件中選擇一個(gè)。
在將children、props、data傳遞給子組件之前操作它們。
JSX為了讓Render函數(shù)更好地書寫和閱讀，Vue提供了插件babel-plugin-transform-vue-jsx來支持JSX語法。
使用createElement時(shí)，常用配置：
See the Pen Vue-createElement by whjin (@whjin) on CodePen.
JSX寫法：
See the Pen Vue-JSX by whjin (@whjin) on CodePen.
表格組件的所有的內(nèi)容（表頭和行數(shù)據(jù)）由兩個(gè)prop構(gòu)成：columns和data。兩者都是數(shù)組，columns用來描述每列的信息，并渲染在表頭內(nèi)，可以指定某一列是否需要排序；data時(shí)每一行的數(shù)據(jù)，由columns決定每一行里各列的順序。
為了讓排序后的columns和data不影響原始數(shù)據(jù)，給v-table組件的data選項(xiàng)添加兩個(gè)對應(yīng)的數(shù)據(jù)，組件所有的操作將在這兩個(gè)數(shù)據(jù)上完成，不對原始數(shù)據(jù)做任何處理。
columns的每一項(xiàng)是一個(gè)對象，其中title和key字段是必填的，用來標(biāo)識這列的表頭標(biāo)題，key的對應(yīng)data中列內(nèi)容的字段名。sortable是選填字段，如果值為true，說明該列需要排序。
v-talbe組件的prop:columns和data的數(shù)據(jù)已經(jīng)從父級傳遞過來，v-table不直接使用它們，而是使用data選項(xiàng)的currentColumns和currentData。所以在v-table初始化時(shí)，需要把columns和data賦值給currentColumns和currentData。在v-table的methods選項(xiàng)里定義兩個(gè)方法用來復(fù)制，并在mounted鉤子內(nèi)調(diào)用。
map()是JavaScript數(shù)組的一個(gè)方法，根據(jù)傳入的函數(shù)重新構(gòu)造一個(gè)新數(shù)組。
排序分升序(asc)和降序(desc)兩種，而且同時(shí)只能對一列數(shù)據(jù)進(jìn)行排序，與其他列互斥，為了標(biāo)識當(dāng)前列的排序狀態(tài)，在map列添加數(shù)據(jù)時(shí)，默認(rèn)給每列都添加一個(gè)_sortType的字段，并且賦值為normal，表示默認(rèn)排序（也就是不排序）。
在排序后，currentData每項(xiàng)的順序可能都會發(fā)生變化，所以給currentColumns和currentData的每個(gè)數(shù)據(jù)都添加_index字段，代表當(dāng)前數(shù)據(jù)在原始數(shù)據(jù)中的索引。
render(h) {
var ths = [],
trs = [];
return h("table", [
h("thead", [
h("tr", ths)
]),
h("tbody", trs)
])
}
這里的h就是createElement，只是換了個(gè)名稱。
表格主題trs是一個(gè)二維數(shù)組，數(shù)據(jù)由currentColumns和currentData組成。
先遍歷所有的行，然后再每一行內(nèi)再遍歷各列，最終組合出主題內(nèi)容節(jié)點(diǎn)trs。
如果col.sortable沒有定義，或值為false，就直接把col.title渲染出來，否則除了渲染title，還加了兩個(gè)元素來實(shí)現(xiàn)升序和降序的操作。
排序使用了JavaScript數(shù)組的sort()方法，這里之所以返回1或-1，而不直接返回a[key]
排序前，先將所有列的排序狀態(tài)都重置為normal，然后設(shè)置當(dāng)前列的排序狀態(tài)（asc或desc），對用到render的元素的class名稱on，后面通過CSS來高亮顯示當(dāng)前列的排序狀態(tài)。
當(dāng)渲染完表格后，父級修改了data數(shù)據(jù)，比如增加或刪除，v-table的currentData也應(yīng)該更新，如果某列已經(jīng)存在排序狀態(tài)，更新后應(yīng)該直接處理一次排序。
通過遍歷currentColumns來找出是否按某一列進(jìn)行過排序，如果有，就按照當(dāng)前排序狀態(tài)對更新后的數(shù)據(jù)做一次排序操作。
See the Pen Vue-可排序表格組件 by whjin (@whjin) on CodePen.
發(fā)布一條留言，需要的數(shù)據(jù)有昵稱和留言內(nèi)容，發(fā)布操作應(yīng)該在根實(shí)例app內(nèi)完成。留言列表的數(shù)據(jù)也是從app獲取。
數(shù)組list存儲了所有的留言內(nèi)容，通過函數(shù)handleSend給list添加一項(xiàng)留言數(shù)據(jù)，添加成后把texrarea文本框置空。
Render函數(shù)內(nèi)的節(jié)點(diǎn)使用v-model：動態(tài)綁定value，并且監(jiān)聽input事件，把輸入的內(nèi)容通過$emit("input")派發(fā)給父組件。
列表數(shù)據(jù)list為空時(shí)，渲染一個(gè)“列表為空”的信息提示節(jié)點(diǎn)；不為空時(shí)，每個(gè)list-item贏包含昵稱、留言內(nèi)容和回復(fù)按鈕3個(gè)子節(jié)點(diǎn)。
this.list.forEach相當(dāng)于template里的v-for指令，遍歷出每條留言。句柄handleReply直接向父組件派發(fā)一個(gè)事件reply，父組件(app)接收后，將當(dāng)前list-item的昵稱提取，并設(shè)置到v-textarea內(nèi)。
See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/102657.html
摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實(shí)現(xiàn)自定義指令注冊完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動的web界面庫。集中實(shí)現(xiàn)MVVM 的 VM層。容易與其他庫或項(xiàng)目整合 通過盡可能簡單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)， 數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動的視圖，普通的HTML模板中使用特殊的語...
摘要：本文主要對組件化開發(fā)中子組件的異步加載和其生命周期進(jìn)行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時(shí)，我們可能需要在子組件實(shí)例化或者叫創(chuàng)建完畢后做某些事情。 前端開發(fā)社區(qū)的繁榮，造就了很多優(yōu)秀的基于 MVVM 設(shè)計(jì)模式的框架，而組件化開發(fā)思想也越來越深入人心。這其中不得不提到 Vue.js 這個(gè)專注于 VM 層的框架。 本文主要對 Vue...
摘要：雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁面的修改。 談?wù)勀銓VVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；...
摘要：前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個(gè)組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？ 在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...
摘要：說實(shí)在話，我在閱讀文檔的時(shí)候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。 前言 先說句前話，如果不是接觸大型項(xiàng)目，不需要有多個(gè)子頁面，不使用vuex也是完全可以的。 說實(shí)在話，我在閱讀vuex文檔的時(shí)候，也很難以去理解v...
閱讀 2303·2023-04-26 00:23
閱讀 1006·2021-09-08 09:45
閱讀 2546·2019-08-28 18:20
閱讀 2687·2019-08-26 13:51
閱讀 1701·2019-08-26 10:32
閱讀 1494·2019-08-26 10:24
閱讀 2124·2019-08-26 10:23
閱讀 2296·2019-08-23 18:10
