vue內(nèi)置指令

vue指令

v-if

????v-if指令可以完全根據(jù)表達式的值在DOM中生成或者移除一個元素丹锹。
????v-if是惰性的,如果初始渲染條件為假队他,則什么也不做,在條件第一次變?yōu)檎鏁r才開始局部編譯峻村,編譯會被緩存起來麸折。

v-show

????v-show指令是根據(jù)表達式的值來顯示或者隱藏HTML元素
????v-show和v-if比較起來,v-if有更高的切換消耗粘昨,v-show有更高的初始渲染消耗垢啼。因此如果有頻繁的切換,使用v-show更好张肾,如果在運行時條件不大可能改變芭析,用v-if比較好。

v-else

????v-else就是javascript里的else的意思吞瞪。搭配v-show使用

v-model

????v-model是用來在input馁启,select,radio芍秆,checkbox惯疙,text等表單控件上創(chuàng)建雙向數(shù)據(jù)綁定。
????除了比較常見的綁定數(shù)據(jù)形式妖啥,v-model后還可以添加參數(shù)霉颠。
1.number
????如果想把輸入的數(shù)據(jù)轉(zhuǎn)換為Number類型,(原值轉(zhuǎn)換為NaN荆虱,則返回原值)可以添加一個number特性.

2.lazy

<input v-model.lazy="msg">

????此參數(shù)可以改變輸入框的值和數(shù)據(jù)的同步蒿偎,同步操作將會在change事件觸發(fā)朽们。

3.trim

<input v-model.trim="msg">

如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符

4.debounce(vue 2.0廢除)
????延時同步輸入的值和數(shù)據(jù)诉位,例如在輸入的時候發(fā)送ajax請求骑脱,比較有用

<input v-model="msg" debounce="1000">

輸入框中輸入數(shù)據(jù)1s之后,data中的msg才會改變

v-for

????v-for需要特殊的別名,形式為"item in items",vue.js 1.0.17以后版本支持of分隔符,"item in/of items",vue2.0規(guī)定最好加上":key=''",這樣有利于數(shù)組的遍歷,每個item都有唯一的key不从。
v-for也支持整數(shù)惜姐。例如v-for="n in 10",會將模板重復整數(shù)次.
還可以遍歷對象 (value,key) in obj ; index表示item在數(shù)組的索引椿息。

v-text

v-text指令可以更新元素的textContent歹袁,在內(nèi)部,{{msg}}插值被編譯為textNode的一個v-text指令寝优。

<span v-text="msg"></span>
// 等價于
<span>{{msg}}</span>
v-html

v-html可以更新元素的innerHtml条舔。

<div v-html="html"></div>
// 等價于
<div>{{{html}}}</div>

不建議在網(wǎng)站上直接動態(tài)渲染任意html片段,這樣很容易導致XSS攻擊乏矾。

v-bind

v-bind指令用于綁定屬性孟抗,class,style等钻心,語法糖是":src=''"凄硼。
在綁定class和style時,支持綁定數(shù)組和對象

// 綁定到數(shù)組
<div id="example" :class="[classA,classB,classC,classD]"></div>
var example = new Vue({
    el:'#example',
    data:{
        classA:'A',
        classB:'other',
        classC:false,
        classD:true
    }
})
// 會被編譯為
<div class="A other classD"></div>

// 當沒有參數(shù)時捷沸,可以綁定到對象摊沉,但是對象的key會被轉(zhuǎn)換為小寫
<div id="example" v-bind="{id:some,'OTHERATTR':other}"></div>
var example = new Vue({
    el:'#example',
    data:{
        some:'some',
        other:'other'
    }
})
// 會被編譯為
<div id="some" otherattr="other"></div>
// 注意綁定到對象時,對象key轉(zhuǎn)換為小寫痒给。

v-on

v-on指令用于綁定事件監(jiān)聽器说墨。v-on也有語法糖,即@;
v-on后面可以增加修飾符

@click.stop=""          //停止冒泡
@click.prevent=""       //阻止默認行為
@click.stop.prevent=""  //以上二者綜合
@click.self=""          //本身觸發(fā)才執(zhí)行函數(shù)
@keyup.enter=""         //在指定鍵上觸發(fā)回調(diào)
vue提供的鍵值有[esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,
down:40,delete:[8,46]];
ref

父組件上注冊子組件的索引,有利于直接訪問
this.$refs訪問

v-once

此指令只綁定一次.


如果您有更多新的想法苍柏,歡迎交流尼斧,共同進步。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末试吁,一起剝皮案震驚了整個濱河市棺棵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌熄捍,老刑警劉巖律秃,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異治唤,居然都是意外死亡棒动,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門宾添,熙熙樓的掌柜王于貴愁眉苦臉地迎上來船惨,“玉大人柜裸,你說我怎么就攤上這事×蝗瘢” “怎么了疙挺?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長怜浅。 經(jīng)常有香客問我铐然,道長,這世上最難降的妖魔是什么恶座? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任搀暑,我火速辦了婚禮,結(jié)果婚禮上跨琳,老公的妹妹穿的比我還像新娘自点。我一直安慰自己,他們只是感情好脉让,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布桂敛。 她就那樣靜靜地躺著,像睡著了一般溅潜。 火紅的嫁衣襯著肌膚如雪术唬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天滚澜,我揣著相機與錄音粗仓,去河邊找鬼。 笑死博秫,一個胖子當著我的面吹牛潦牛,可吹牛的內(nèi)容都是我干的眶掌。 我是一名探鬼主播挡育,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼朴爬!你這毒婦竟也來了即寒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤召噩,失蹤者是張志新(化名)和其女友劉穎母赵,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體具滴,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡凹嘲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了构韵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片周蹭。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡趋艘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凶朗,到底是詐尸還是另有隱情瓷胧,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布棚愤,位于F島的核電站搓萧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏宛畦。R本人自食惡果不足惜瘸洛,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望刃永。 院中可真熱鬧货矮,春花似錦、人聲如沸斯够。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽读规。三九已至抓督,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間束亏,已是汗流浹背铃在。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碍遍,地道東北人定铜。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像怕敬,于是被迫代替她去往敵國和親揣炕。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

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

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容东跪,還有我對于 Vue 1.0 印象不深的內(nèi)容畸陡。關(guān)于...
    云之外閱讀 5,052評論 0 29
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量虽填,可以在頁面使用了丁恭。 如果希望搭建...
    Awey閱讀 11,039評論 4 129
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,221評論 0 6
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,236評論 0 25
  • 你只是放任了自己 隨心所欲 我只是習慣了孤獨 鐘愛自由 我們追逐著生活 生活卻偏愛玩鬧 翻來覆去 開各種玩笑 我們...
    景瓷閱讀 279評論 0 0