Vue學習之常用指令例項詳解
本文例項講述了Vue常用指令。分享給大家供大家參考,具體如下:
1、建立一個vue例項
vue的一個特點就是資料驅動介面,一旦對js中的資料進行修改,介面中用到資料的地方也會立馬做出更改。為了對介面進行操縱,需要先獲取到介面的標籤元素,並例項化一個vue例項。
例如在HTML建立一個div:
<div id="app"> <p>{{msg}}</p> </div>
在js中將其例項化為vue物件:
let app=new Vue({ el:'#app',//標籤的類名、id,用於獲取元素 //以鍵值對的形式存放用到的資料成員 data:{ msg:'顯示的內容' },//包含要用到的函式方法 methods:{ } });
這樣js中msg的內容就會在p標籤內顯示出來。
2、vue常用指令
1、 v-model:將元件與變數進行雙向繫結,當元件資料修改時,變數會隨之改變。它後面可加修飾符,例如.lazy,只有在標籤中的值發生改變時才同步到變數,.trim過濾使用者輸入中的空格。
2、v-once:不允許修改資料,例如HTML中有如下三個標籤:
<div id="app"> <p v-once>{{msg}}</p> <p>{{msg}}</p> <input type="text" v-model="msg"> </div>
在input框內輸入內容後,會傳到msg變數中,第二個p標籤內顯示的資訊會隨著msg發生變化,而第一個帶有v-once的p標籤則只會顯示msg的初始值,不會隨之變化。
3、v-if="表示式",根據表示式的結果來判斷,是true則渲染元素,false則將元素註釋掉
4、v-show與v-if類似,true就渲染,但是false並不是註釋掉,而是通過display:none;來將元素隱藏,如果需要來回切換,使用v-show更好。例如:
<p v-if="show">顯示內容</p> <p v-if="hide">註釋內容</p> <p v-show="hide">v-show隱藏</p>
令show:true,hide:false,結果如下:
5、v-else、v-else-if與v-if連在一起使用構成邏輯判斷,根據返回值決定是否顯示,不可以單獨或者分開使用,例如:
<p>請輸入分值:</p> <input type="text" v-model="score"> <p v-if="score>90">優秀</p> <p v-else-if="score>80">良好</p> <p v-else-if="score>60">中等</p> <p v-else>不及格</p>
測試結果為:
6、v-for用於遍歷元素,使用格式為v-for="(值,鍵) in 遍歷內容",其遍歷的內容可以是陣列、物件、字串,例如在js的data中有一個person物件,person:{name:'tony',age:15,sex:'男'},將其內容在頁面遍歷輸出:
<p v-for="(value,key) in person"> {{key+':'+value}} </p>
生成結果如下:
7、v-text:向標籤內注入資料,並且覆蓋標籤內的其他內容
8、v-html:向標籤內覆蓋注入HTML內容作為其子元素。例如:
<div v-html="vhtml">標籤內原來內容</div>
結果插入一個子div並將覆蓋原內容:
9、v-bind:給標籤繫結屬性、類、樣式等,可以縮寫為冒號,例如:
<!-- 完整語法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a> <!-- 縮寫 --> <a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
由於vue的介面元素都是由資料驅動的,js程式碼從伺服器獲得的屬性、樣式等資料需要通過繫結加到HTML介面元素上,通過繫結可以更為靈活地選擇要新增屬性的元素。Vue並不是直接操縱元素的class,而是通過繫結一個數據到class上,然後通過資料驅動class的有無,從而改變頁面的顯示,這充分顯示了vue資料驅動的特點。
例如給上面person物件中key為'name'的那一行資訊繫結一個active類使其高亮顯示:
<!--通過v-for迴圈遍歷person陣列,繫結class,如果鍵值為name,繫結的class='active'--> <p v-for="(value,key) in person" :class="key==='name' ? 'active' : ''"> {{key+':'+value}} </p>
結果:
也可以使用如下方法來繫結一個類名,頁面會根據變數isActive與hasError的true或false來確定是否繫結active與text-danger類,甚至可以將active設為計算屬性,運算後返回true/false。
注意:繫結的屬性可以用駝峰命名法或使用短橫線來連線,但使用短橫線要用引號引起來
<div class="static" v-bind:class="{ active: isActive,'text-danger': hasError }"> </div>
10、v-on:給標籤繫結函式,可以縮寫為@,例如繫結一個點選函式
<p>{{msg}}</p> <button @click="changeContent()">change</button>
在Vue的methods中實現changeContent函式:
let app=new Vue({ el:'#app',data:{ msg:'第一次輸入資訊',},methods:{ changeContent(){ this.msg="修改後的輸入資訊"; } } });
原頁面與點選後:
Vue.js 為 v-on 提供了事件修飾符。修飾符是由.開頭的指令字尾來表示的,用於對事件進行約束。例如:
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再過載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯使用,並且使用的順序很重要 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 新增事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處處理,然後才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時才觸發函式 --> <!-- 即事件不從內部元素觸發 --> <div v-on:click.self="doThat">...</div> <!-- 點選事件將只會觸發一次 --> <a v-on:click.once="doThis"></a>
除了點選事件外,還有按鍵事件,例如按下鍵盤碼為13的按鈕時觸發:
<input v-on:keyup.13="submit">
為了方便使用vue將一些常用按鍵重新命名,可以使用事件修飾符來使用,包括:.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等,也可以自定義:
Vue.config.keyCodes.f1 = 112;
希望本文所述對大家vue.js程式設計有所幫助。