1. 程式人生 > 程式設計 >Vue學習之常用指令例項詳解

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程式設計有所幫助。