小程序與Vue對比·數(shù)據(jù)綁定

小程序?qū)?xiàng)目代碼包的大小是有要求的鸟妙,目前限制為2M。2M大小快压,著實(shí)不大圆仔,尤其是對那些有著多條業(yè)務(wù)線的公司。小程序是個寸土寸金的地方蔫劣,每K必爭坪郭,絲毫不過。設(shè)想一下脉幢,隨著項(xiàng)目的持續(xù)迭代歪沃,新的功能不斷加進(jìn)來,代碼量總有超過2M的時候嫌松,怎么辦沪曙?此時,我們就得將那些不是太重要的萎羔,但又不能丟掉的功能放到H5上去液走。而使用Vue框架開發(fā)H5在逐漸被更多的開發(fā)者地采用,那么小程序轉(zhuǎn)Vue就是一個確實(shí)存在著的場景贾陷。本文的目的旨在通過對比小程序與Vue基礎(chǔ)語法缘眶,讓大家對小程序與Vue之間的轉(zhuǎn)換,哪些很容易搬過來髓废,哪些需要經(jīng)過適當(dāng)變通巷懈,哪些壓根沒法轉(zhuǎn),有一定的了解慌洪。

第一篇先分析對比基礎(chǔ)的數(shù)據(jù)綁定顶燕。

數(shù)據(jù)綁定

1.文本

<view>小程序:{{message}}</view>
<span>Vue:{{message}}</span>
總結(jié):文本綁定基本上可以照搬過來。

2.HTML綁定

Vue提供了v-html指令用于輸出HTML冈爹,例如:

JS
data() {
    return {
        rawHtml: '<p><span>這是一些文本</span></p>'
    }
}

HTML
<div v-html="rawHtml"></div>

最終HTMl會被渲染為:

HTML
<p><span>這是一些文本</span></p>

但是在小程序中涌攻,并沒有與v-html對應(yīng)的api,有興趣的同學(xué)可以研究下這是為何频伤,可以在評論區(qū)里面交流癣漆。不過,小程序還是提供了rich-text組件來實(shí)現(xiàn)類似的功能剂买,只不過使用起來稍微有點(diǎn)麻煩惠爽。本文不對rich-text的使用做講解,想了解具的使用方法瞬哼,可點(diǎn)此查看婚肆。結(jié)合實(shí)際場景,如果我們要使用rich-text如下的渲染效果:

WXML
<p class="p-class"><span style="color:red;">這是一些文本</span></p>

可以這樣:

JS
data: {
    nodes:[{
        name: 'p',
        attrs: {
            class: 'p-class'
        },
        children: [{
            name: 'span',
            attrs: {
                style: 'color:red;'
            },
            children: [{
                type: 'text',
                text: '這是一些文本'
            }]
        }]
    }]
}

WXML
<rich-text nodes="{{nodes}}"></rich-text>

渲染結(jié)果在UI上表現(xiàn)正常坐慰,但是在Wxml上并不會轉(zhuǎn)換成我們預(yù)想的html標(biāo)簽较性,仍然是rich-text標(biāo)簽。

image

苦于小程序現(xiàn)有的api對富文本的解析支持程度較低结胀,網(wǎng)上有些第三方插件給出了解決方案赞咙,其中wxParse就是杰出的代表,有關(guān)于wxParse的使用介紹糟港,可點(diǎn)此查看攀操。
總結(jié):關(guān)于HTMl綁定,小程序轉(zhuǎn)Vue比較容易秸抚,直接定義規(guī)范化的html標(biāo)簽更符合我們的習(xí)慣速和。Vue轉(zhuǎn)小程序比較麻煩,需要我們將html標(biāo)簽映射到小程序nodes集合剥汤。

HTML特性

關(guān)于什么是HTML特性颠放,我們可以這樣理解:HTML特性是指HTML標(biāo)簽原生支持的屬性,無需用戶自定義吭敢,分為全局屬性和特有屬性碰凶。全局屬性是所有標(biāo)簽基本上都具有的屬性,比如class鹿驼、id等欲低。特有屬性是指某些特殊的標(biāo)簽具有的屬性,比如type屬性蠢沿,input和textarea等少數(shù)標(biāo)簽才具有的屬性伸头。

1.在Vue里面

mustache語法不能作用在HTML特性上,遇到這種情況需要使用v-bind指令舷蟀,比如:

HTML
<div id="dynamicId"></div>

這同樣適用于布爾類型特性恤磷,比如:

HTML
<button v-bind:disabled="isBtnDisabled"></button>
2.在小程序里面

mustache語法可以直接作用在HTML特性上,比如:

WXML
<view id="{{dynamicId}}"></view>

對于布爾類型特性野宜,mustache一定不要省略扫步,否則會被當(dāng)成字符串處理,造成適得其反的效果匈子,比如:

WXML
<button disabled="falsy"></botton>

其中falsy泛指可轉(zhuǎn)換為false的值河胎。省略mustache,falsy會被當(dāng)做字符串"falsy"處理虎敦,轉(zhuǎn)化成Boolean類型后代表真值游岳。
總結(jié):關(guān)于HTML特性的綁定政敢,記住Vue使用v-bind指令,雙方之間的轉(zhuǎn)換也比較容易進(jìn)行胚迫。

JavaScript表達(dá)式

vue和小程序都表達(dá)式喷户,比如:

<div>{{bool ? 'yes' : 'no' }}</div> <view>{{bool ? 'yes' : 'no' }}</view>
有意思的是,小程序提供了在Mustache內(nèi)對數(shù)組和對象進(jìn)行組合的功能访锻。

數(shù)組組合
JS  
data: {
    zero: 0
}

WXML
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>

[zero, 1, 2, 3, 4]最終被組合為[0, 1, 2, 3, 4]

對象組合
JS
data: {
    a: 1,
    b: 2
}

WXML
<view data-comb="{{foo: a, bar: b}}"></view>

data-comb最終組合成{foo: 1, bar: 2}
除此之外褪尝,小程序還借鑒了ES6的新特性,比如利用擴(kuò)展運(yùn)算符...將對象展開期犬。比如:

JS
data: {
    obj1: {
        a: 1,
        b: 2
    },
    obj2: {
        c: 3,
        d: 4
    }
}

WXML
<view data-comb="{{...obj1, ...obj2, e: 5}}"></view>

data-comb最終組合成{a: 1, b: 2, c: 3, d: 4, e: 5}
擴(kuò)展運(yùn)算符...出現(xiàn)的意義就是實(shí)現(xiàn)數(shù)組和松散序列的相互轉(zhuǎn)化河哑,取代apply方法等,有興趣的同學(xué)嘗試模擬實(shí)現(xiàn)擴(kuò)展運(yùn)算符...對對象的展開龟虎。除此之外璃谨,也支持在組合中簡寫屬性,這一點(diǎn)與ES6一致遣总,比如:

JS
data: {
    foo: 'my-foo',
    bar: 'my-bar'
}

WXML
<view data-comb="{{foo, bar}}"></view>

data-comb最終組合成{foo: 'my-foo', bar:'my-bar'}
總結(jié):小程序與Vue在常規(guī)的表達(dá)式綁定方面基本上是一致的睬罗,如果你在小程序中使用上述的數(shù)組和對象的組合,就需要考慮在Vue去自己實(shí)現(xiàn)旭斥。

到此容达,數(shù)據(jù)綁定的先羅列這么多,在后續(xù)的開發(fā)過程中有特殊的案例或者需要特別指明的地方垂券,我會編輯添加進(jìn)來花盐,也歡迎大家批評指正,下一篇對比分析class與style綁定菇爪。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末算芯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子凳宙,更是在濱河造成了極大的恐慌熙揍,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氏涩,死亡現(xiàn)場離奇詭異届囚,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)是尖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門意系,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人饺汹,你說我怎么就攤上這事蛔添。” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵迎瞧,是天一觀的道長夸溶。 經(jīng)常有香客問我,道長凶硅,這世上最難降的妖魔是什么蜘醋? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮咏尝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘啸罢。我一直安慰自己编检,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布扰才。 她就那樣靜靜地躺著允懂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衩匣。 梳的紋絲不亂的頭發(fā)上蕾总,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天,我揣著相機(jī)與錄音琅捏,去河邊找鬼生百。 笑死,一個胖子當(dāng)著我的面吹牛柄延,可吹牛的內(nèi)容都是我干的蚀浆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼搜吧,長吁一口氣:“原來是場噩夢啊……” “哼市俊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起滤奈,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤摆昧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蜒程,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體绅你,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年搞糕,在試婚紗的時候發(fā)現(xiàn)自己被綠了勇吊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡窍仰,死狀恐怖汉规,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤针史,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布晶伦,位于F島的核電站,受9級特大地震影響啄枕,放射性物質(zhì)發(fā)生泄漏婚陪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一频祝、第九天 我趴在偏房一處隱蔽的房頂上張望泌参。 院中可真熱鬧,春花似錦常空、人聲如沸沽一。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铣缠。三九已至,卻和暖如春昆禽,著一層夾襖步出監(jiān)牢的瞬間蝗蛙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工醉鳖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捡硅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓辐棒,卻偏偏與公主長得像病曾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子漾根,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內(nèi)容

  • # 傳智播客vue 學(xué)習(xí)## 1. 什么是 Vue.js* Vue 開發(fā)手機(jī) APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,549評論 0 6
  • 最近在逛各大網(wǎng)站泰涂,論壇,以及像SegmentFault等編程問答社區(qū)辐怕,發(fā)現(xiàn)Vue.js異潮泼桑火爆,重復(fù)性的提問和內(nèi)容...
    忘川慕白閱讀 5,937評論 7 113
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容寄疏,還有我對于 Vue 1.0 印象不深的內(nèi)容是牢。關(guān)于...
    云之外閱讀 5,050評論 0 29
  • 主要還是自己看的,所有內(nèi)容來自官方文檔陕截。 介紹 Vue.js 是什么 Vue (讀音 /vju?/驳棱,類似于 vie...
    Leonzai閱讀 3,353評論 0 25
  • 【講故事】早晨給主角想了個名字現(xiàn)在忘了…... 有這么一個推銷員,以電話推銷普通日用品過活农曲。推銷員么社搅,都不掙錢驻债,可...
    扣舷閱讀 501評論 6 13