摘要:指令在上使用元素沒有設(shè)置屬性時,自動設(shè)置綁定的狀態(tài)屬性名為屬性。
一個模塊的template模板、JavaScript和css之間的關(guān)系其實可以如下圖表示:
如果你了解Angular、Vue動態(tài)模板,那你將會對Amaple的模板感到很熟悉,在Amaple中,template模板也是基于模板指令和狀態(tài)數(shù)據(jù)的動態(tài)模板引擎,當(dāng)一個狀態(tài)數(shù)據(jù)改變時,在template模板中與它綁定的dom元素將自動作出相應(yīng)的更新,所以此時你只需關(guān)心模塊內(nèi)的狀態(tài)數(shù)據(jù),而不需去理會視圖層的更新。
指令類型指令分為動態(tài)指令和靜態(tài)指令,動態(tài)指令的值會被當(dāng)作JavaScript代碼被解析,所以它們可以獲取并綁定狀態(tài)屬性的值,如:if、:for等指令;而靜態(tài)屬性的值只會被當(dāng)做普通的字符串處理,無法綁定狀態(tài)屬性,如:module和:ref指令。
使用插值表達(dá)式輸出文本我們直接先看看在index.html模板中使用插值表達(dá)式輸出文本和屬性,你應(yīng)該會很快明白是怎么回事了:
{{ text }} direct to page about
【注意】①. 模板中的取值范圍為當(dāng)前模塊的狀態(tài)數(shù)據(jù)對象,在上面示例中,解析掛載時{{ text }}被替換為狀態(tài)數(shù)據(jù)的text屬性值;# 插值表達(dá)式在style與class屬性的特殊表現(xiàn)
②. 插值表達(dá)式的{{}}將被作為JavaScript代碼解析,如你可以這樣寫{{ text === 1 ? "show" : "hidden" }},表示text屬性值等于數(shù)字1時輸出"show",否則輸出"hidden"。
插值表達(dá)式一般輸出字符串(狀態(tài)屬性值不為字符串時將會調(diào)用該值的toString函數(shù)),但在style屬性上使用插值表達(dá)式時會將一個object對象轉(zhuǎn)換為內(nèi)聯(lián)樣式的格式,在class屬性上使用時會將一個array數(shù)組轉(zhuǎn)換為以空格隔開的字符串:
循環(huán)渲染輸出dom元素在實際項目中,經(jīng)常會遇到根據(jù)數(shù)據(jù)庫的數(shù)據(jù)來渲染一個列表的需求,如用戶列表、使用表格展示數(shù)據(jù)等,此時我們就需要使用模板指令:for來完成需求:
# 在上使用:for
- {{ item }}
你可以在上使用:for來循環(huán)渲染多個dom元素:
list.firstName list.lastName它將被渲染為:
# 使用:for指令遍歷字符串George Bush Jake Wood當(dāng):for指令遍歷字符串時,item值為字符串每個字符:
# 使用:for指令遍歷數(shù)字Amaple由 [{{ char }}] 組成當(dāng):for指令遍歷數(shù)字時,item值為從0開始累加的索引數(shù)字:
小于5的非負(fù)數(shù)有 [{{ num }}]【注意】使用狀態(tài)數(shù)組應(yīng)該避免直接通過索引操作,如this.state.list [ 0 ] = "banana"將不會觸發(fā)自動更新。通過條件判斷顯示與隱藏元素我們經(jīng)常需要通過條件判斷來確定應(yīng)該顯示哪一部分的內(nèi)容,以簡單的用戶登錄為例,當(dāng)有用戶信息時顯示信息,沒有時顯示登錄按鈕,此時可以使用模板指令的:if、:else-if、:else,它與我們熟知的if、else if及else關(guān)鍵字的用法相同:
{{ userInfo.username }}當(dāng)初始化時module.state.userInfo=null,它將被渲染為:
當(dāng)mounted鉤子函數(shù)觸發(fā)后module.state.userInfo={ username: "Tom", avatar: "tom_101101.jpg" },它將被渲染為:
# 在上使用條件判斷Tom它將的子元素作為一個整體進(jìn)行條件判斷,并在渲染的時候去掉父元素。
content1 content2 content3 content4content5當(dāng)module.state.show=true時將被渲染為:
content1 content2當(dāng)module.state.show=false時將被渲染為:
content3 content4當(dāng)module.state.show=1時將被渲染為:
# :for和:if在同一個元素上使用content5:for指令的解析優(yōu)先級高于:if,這意味著所有循環(huán)渲染的元素都會判斷:if的條件。
- {{ item }}
它將被渲染為:
- orange
- grape
【注意】帶有:else-if或:else屬性元素的上一個兄弟元素必須使用了:if或:else-if指令,且:else屬性是沒有值的模塊函數(shù)與事件綁定在狀態(tài)數(shù)據(jù)對象上定義的函數(shù)叫做模塊函數(shù),我們在子模塊主動向父模塊傳值時提到過它。除了傳值的作用外,模塊函數(shù)還可當(dāng)做事件綁定函數(shù)來使用,如下面事件綁定的示例,在上使用:on指令聲明click事件并指定回調(diào)函數(shù)。
【注意】模塊函數(shù)內(nèi)的this指針指向當(dāng)前模塊的狀態(tài)數(shù)據(jù)對象(即module.state對象),它也不可使用ES6的箭頭函數(shù)(Arrow function),因為這樣會導(dǎo)致函數(shù)內(nèi)this指針指向不正確而出錯。計算屬性假如項目的某個模塊中定義了兩個狀態(tài)屬性,分別為產(chǎn)品品牌brand、產(chǎn)品型號model,此時你需要在模板中輸出品牌與型號的組合,此時你可能會這樣寫:
{{ brand }} {{ model }}
這沒有任何問題,但當(dāng)有多處都需輸出同樣信息時,使用多個差值表達(dá)式就顯得有點麻煩,所以對于如需要多次拼接字符串或其他任何較為復(fù)雜處理的輸出,應(yīng)該使用計算屬性來實現(xiàn),像這樣:
{{ productName }}
表單的雙向綁定在表單元素上使用:model指令即可實現(xiàn)表單輸入值與狀態(tài)屬性的雙向綁定,如下:
可使用model指令的表單元素有type為任何值的input、textarea和select。# :model指令在checkbox上使用checkbox綁定的狀態(tài)屬性值必須為Array類型,且當(dāng)多個checkbox綁定同一個狀態(tài)屬性時,被選中checkbox的值將會保存在此數(shù)組中。
# :model指令在radio上使用radio元素沒有設(shè)置name屬性時,自動設(shè)置綁定的狀態(tài)屬性名為name屬性。
以上所有指令為動態(tài)指令,接下來的是靜態(tài)指令設(shè)置當(dāng)前頁面顯示的標(biāo)題當(dāng)url跳轉(zhuǎn)更新模塊時,我們希望標(biāo)題隨模塊改變,此時我們可使用:title指令來設(shè)置標(biāo)題,它只能用于一個模塊的
元素上,像這樣: ... 當(dāng)然很多時候一個頁面將同時加載多個不同層級的模塊,此時框架將會從上到下、從外到內(nèi)的順序解析并更新模塊,當(dāng)以這樣的順序解析時將會獲取第一個:title不為空的標(biāo)題作為更新標(biāo)題,而會自動忽略后面模塊所定義的標(biāo)題,所以建議標(biāo)題應(yīng)該在最外層的主模塊中定義。引用元素有時候必須操作dom元素如聚焦input元素,我們必須獲取此input元素的對象并調(diào)用input.focus函數(shù),這時可以在此input元素上使用:ref指令定義一個引用,然后調(diào)用am.Module對象的成員函數(shù)refs( refName )獲取被引用的dom元素:
當(dāng)多個元素的:ref值設(shè)置同一個引用名時,使用refs函數(shù)獲取該引用名的dom元素時將會返回一個包含所有該引用名的元素數(shù)組。繼續(xù)學(xué)習(xí)下一節(jié):【AmapleJS教程】4. 組件
也可回顧上一節(jié):【AmapleJS教程】2. 模塊文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/92718.html
相關(guān)文章
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)(state)
摘要:指令在上使用元素沒有設(shè)置屬性時,自動設(shè)置綁定的狀態(tài)屬性名為屬性。 一個模塊的template模板、JavaScript和css之間的關(guān)系其實可以如下圖表示:showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue動態(tài)模板,那你將會對Amaple的模板感到很熟悉,在Amaple中,template...
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)(state)
摘要:指令在上使用元素沒有設(shè)置屬性時,自動設(shè)置綁定的狀態(tài)屬性名為屬性。 一個模塊的template模板、JavaScript和css之間的關(guān)系其實可以如下圖表示:showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue動態(tài)模板,那你將會對Amaple的模板感到很熟悉,在Amaple中,template...
【Amaple教程】2. 模塊
摘要:模塊更新時部分不需被替換的模塊,檢測到或參數(shù)變化增加移除或修改參數(shù)時觸發(fā),如所有頁面的部分總是不變,此時它將不會被替換。模塊函數(shù)將在模板指令與狀態(tài)數(shù)據(jù)中講解繼續(xù)學(xué)習(xí)下一節(jié)教程模板指令與狀態(tài)數(shù)據(jù)也可回顧上一節(jié)教程啟動路由 正如它的名字,模塊用于amaplejs單頁應(yīng)用的頁面分割,所有的跳轉(zhuǎn)更新和代碼編寫都是以模塊為單位的。 定義一個模塊 一個模塊由標(biāo)簽對包含,內(nèi)部分為template模板...
發(fā)表評論
0條評論
閱讀 758·2021-11-22 09:34
閱讀 3886·2021-09-22 15:42
閱讀 1397·2021-09-03 10:28
閱讀 1151·2021-08-26 14:13
閱讀 2033·2019-08-29 15:41
閱讀 1493·2019-08-29 14:12
閱讀 3443·2019-08-26 18:36
閱讀 3370·2019-08-26 13:47