Vue-模板語法

模板語法

????????Vue.js 使用了基于 HTML 的模版語法,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)卫病。Vue模板因而從實(shí)際上不同于基于字符串的模板蹂季。

????????Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)齐帚。

????????結(jié)合響應(yīng)系統(tǒng)庐冯,在應(yīng)用狀態(tài)改變時,Vue 能夠智能地計(jì)算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上慧妄。

一顷牌、插入值

1、文本

????????數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值:

????????Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上?msg?屬性的值塞淹。綁定的數(shù)據(jù)對象上?msg?屬性發(fā)生了改變窟蓝,插值處的內(nèi)容都會更新。

????????通過使用v-once 指令(指令將在后續(xù)章節(jié)介紹)饱普,執(zhí)行一次性地插值运挫,當(dāng)數(shù)據(jù)改變時状共,插值處的內(nèi)容不會更新。但這會影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定或者在花括號中使用*也可以做到一次性插值滑臊。

2口芍、原始HTML

????????雙大括號會將數(shù)據(jù)解釋為普通文本箍铲,而非HTML 代碼雇卷。為了輸出真正的 HTML,需要使用?v-html?指令或使用三花括號{{{ rawHtml }}}:

????????結(jié)果:

3颠猴、HTML特性

????????Mustache標(biāo)簽也可以用在Html的屬性內(nèi):

????????但是在一些特殊特性內(nèi)和Vue.js指令中不能使用插值关划,如果用錯地方Vue.js會給出警告。

4翘瓮、JavaScript表達(dá)式

????????對于所有的數(shù)據(jù)綁定贮折,Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。

????????這些表達(dá)式會在所屬Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析资盅。有個限制就是调榄,每個綁定都只能包含單個表達(dá)式,所以下面的例子將不會生效呵扛。

二每庆、指令

????????指令(Directives) 是帶有?v-?前綴的特殊特性。指令的職責(zé)是今穿,當(dāng)表達(dá)式的值改變時缤灵,將其產(chǎn)生的連帶影響,響應(yīng)式地作用于DOM蓝晒。指令特性的值預(yù)期是單個JavaScript 表達(dá)式(v-for?是例外情況腮出,稍后我們再討論)。

????????這里v-if?指令將根據(jù)表達(dá)式?seen?的值的真假來插入/移除元素芝薇。當(dāng)v-if的值為true時也沒初始化渲染時將會插入元素否則會被移除胚嘲。

1、參數(shù)

????????參數(shù)在指令后以冒號指明洛二。例如馋劈,v-bind指令被用來響應(yīng)地更新 HTML 屬性:

? ???在這里?href?是參數(shù),告知?v-bind?指令將該元素的?href?特性與表達(dá)式?url?的值綁定灭红。

2侣滩、修飾符

????????修飾符(Modifiers) 是以半角句號?.?指明的特殊后綴,用于指出一個指令應(yīng)該以特殊方式綁定变擒。

????????.prevent?修飾符告訴v-on?指令對于觸發(fā)的事件調(diào)用?event.preventDefault():

3君珠、縮寫

????????v-前綴是一種標(biāo)識模板中特定的Vue特性的視覺按時。

????????在構(gòu)建單頁應(yīng)用時娇斑,Vue.js會管理所有的模板此時v-前綴就沒那么重要策添。

????????Vue.js 為?v-bind?和?v-on?這兩個最常用的指令材部,提供了特定簡寫。


三唯竹、用戶輸入

????????在input 輸入框中我們可以使用 v-model 指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定:

????????這樣乐导,就將input與p標(biāo)簽進(jìn)行了綁定,input的值改變浸颓,p標(biāo)簽的文本也會被改變物臂。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市产上,隨后出現(xiàn)的幾起案子棵磷,更是在濱河造成了極大的恐慌,老刑警劉巖晋涣,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仪媒,死亡現(xiàn)場離奇詭異,居然都是意外死亡谢鹊,警方通過查閱死者的電腦和手機(jī)算吩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來佃扼,“玉大人偎巢,你說我怎么就攤上這事∷伤唬” “怎么了艘狭?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長翠订。 經(jīng)常有香客問我巢音,道長,這世上最難降的妖魔是什么尽超? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任官撼,我火速辦了婚禮,結(jié)果婚禮上似谁,老公的妹妹穿的比我還像新娘傲绣。我一直安慰自己,他們只是感情好巩踏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布秃诵。 她就那樣靜靜地躺著,像睡著了一般塞琼。 火紅的嫁衣襯著肌膚如雪菠净。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機(jī)與錄音毅往,去河邊找鬼牵咙。 笑死,一個胖子當(dāng)著我的面吹牛攀唯,可吹牛的內(nèi)容都是我干的洁桌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼侯嘀,長吁一口氣:“原來是場噩夢啊……” “哼另凌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起残拐,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤途茫,失蹤者是張志新(化名)和其女友劉穎碟嘴,沒想到半個月后溪食,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡娜扇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年错沃,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雀瓢。...
    茶點(diǎn)故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡枢析,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出刃麸,到底是詐尸還是另有隱情醒叁,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布泊业,位于F島的核電站把沼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏吁伺。R本人自食惡果不足惜饮睬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望篮奄。 院中可真熱鬧捆愁,春花似錦、人聲如沸窟却。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夸赫。三九已至菩帝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胁附。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工酒繁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人控妻。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓州袒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親弓候。 傳聞我的和親對象是個殘疾皇子郎哭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評論 2 353

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

  • Vue.js使用基于HTML的模板語法,允許開發(fā)者聲明式地將DOM綁定到底層Vue實(shí)例菇存。所有Vue.js的模板都是...
    JunChow520閱讀 3,252評論 0 0
  • 一. 模板語法 *** Vue.js 使用了基于 HTML 的模板語法夸研,允許開發(fā)者聲明式地將 DOM 綁定至底層 ...
    竹溪穆褕閱讀 244評論 0 0
  • vue模板語法 插值 文本 1.“Mustache”語法插值: html: js: 2.v-text指令html ...
    樊海鵬閱讀 3,831評論 1 0
  • 在vue中模板是什么? 這個就是模板: Vue.js 使用了基于HTML的模板語法依鸥,允許開發(fā)者聲明式地將DOM綁定...
    廖馬兒閱讀 286評論 0 0
  • Vue.js 使用了基于 HTML 的模版語法亥至,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。 V...
    何wife閱讀 344評論 0 0