本文實(shí)例講述了Vue常用指令。分享給大家供大家參考，具體如下：

1、創(chuàng)建一個(gè)vue實(shí)例

vue的一個(gè)特點(diǎn)就是數(shù)據(jù)驅(qū)動(dòng)界面，一旦對js中的數(shù)據(jù)進(jìn)行修改，界面中用到數(shù)據(jù)的地方也會立馬做出更改。為了對界面進(jìn)行操縱，需要先獲取到界面的標(biāo)簽元素，并實(shí)例化一個(gè)vue實(shí)例。

例如在HTML創(chuàng)建一個(gè)div：

<div id="app">
  <p>{{msg}}</p>
</div>

在js中將其實(shí)例化為vue對象：

  let app=new Vue({
    el:'#app',//標(biāo)簽的類名、id，用于獲取元素
    //以鍵值對的形式存放用到的數(shù)據(jù)成員
    data:{
      msg:'顯示的內(nèi)容'
    },
    //包含要用到的函數(shù)方法
    methods:{
    }
  });

這樣js中msg的內(nèi)容就會在p標(biāo)簽內(nèi)顯示出來。

2、vue常用指令

1、 v-model:將組件與變量進(jìn)行雙向綁定，當(dāng)組件數(shù)據(jù)修改時(shí)，變量會隨之改變。它后面可加修飾符，例如.lazy，只有在標(biāo)簽中的值發(fā)生改變時(shí)才同步到變量，.trim過濾用戶輸入中的空格。

2、v-once:不允許修改數(shù)據(jù)，例如HTML中有如下三個(gè)標(biāo)簽：

  <div id="app">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
  </div>

在input框內(nèi)輸入內(nèi)容后，會傳到msg變量中，第二個(gè)p標(biāo)簽內(nèi)顯示的信息會隨著msg發(fā)生變化，而第一個(gè)帶有v-once的p標(biāo)簽則只會顯示msg的初始值，不會隨之變化。

3、v-if="表達(dá)式"，根據(jù)表達(dá)式的結(jié)果來判斷，是true則渲染元素，false則將元素注釋掉

4、v-show與v-if類似，true就渲染，但是false并不是注釋掉，而是通過display:none;來將元素隱藏，如果需要來回切換，使用v-show更好。例如：  

<p v-if="show">顯示內(nèi)容</p>
<p v-if="hide">注釋內(nèi)容</p>
<p v-show="hide">v-show隱藏</p>

令show:true,hide:false，結(jié)果如下：

5、v-else、v-else-if與v-if連在一起使用構(gòu)成邏輯判斷，根據(jù)返回值決定是否顯示，不可以單獨(dú)或者分開使用，例如：

<p>請輸入分值：</p>
<input type="text" v-model="score">
<p v-if="score>90">優(yōu)秀</p>
<p v-else-if="score>80">良好</p>
<p v-else-if="score>60">中等</p>
<p v-else>不及格</p>

測試結(jié)果為：

6、v-for用于遍歷元素，使用格式為v-for="(值,鍵) in 遍歷內(nèi)容"，其遍歷的內(nèi)容可以是數(shù)組、對象、字符串，例如在js的data中有一個(gè)person對象，person:{name:'tony',age:15,sex:'男'}，將其內(nèi)容在頁面遍歷輸出： 

<p v-for="(value,key) in person">
  {{key+':'+value}}
</p>

生成結(jié)果如下：

7、v-text：向標(biāo)簽內(nèi)注入數(shù)據(jù)，并且覆蓋標(biāo)簽內(nèi)的其他內(nèi)容

8、v-html：向標(biāo)簽內(nèi)覆蓋注入HTML內(nèi)容作為其子元素。例如：

<div v-html="vhtml">標(biāo)簽內(nèi)原來內(nèi)容</div>

結(jié)果插入一個(gè)子div并將覆蓋原內(nèi)容：

9、v-bind：給標(biāo)簽綁定屬性、類、樣式等，可以縮寫為冒號，例如：    

<!-- 完整語法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- 縮寫 -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>

由于vue的界面元素都是由數(shù)據(jù)驅(qū)動(dòng)的，js代碼從服務(wù)器獲得的屬性、樣式等數(shù)據(jù)需要通過綁定加到HTML界面元素上，通過綁定可以更為靈活地選擇要添加屬性的元素。Vue并不是直接操縱元素的class，而是通過綁定一個(gè)數(shù)據(jù)到class上，然后通過數(shù)據(jù)驅(qū)動(dòng)class的有無，從而改變頁面的顯示，這充分顯示了vue數(shù)據(jù)驅(qū)動(dòng)的特點(diǎn)。

例如給上面person對象中key為'name'的那一行信息綁定一個(gè)active類使其高亮顯示：

<!--通過v-for循環(huán)遍歷person數(shù)組，綁定class，如果鍵值為name，綁定的class='active'-->
<p v-for="(value,key) in person" :class="key==='name' ? 'active' : ''">
  {{key+':'+value}}
</p>

結(jié)果：

也可以使用如下方法來綁定一個(gè)類名，頁面會根據(jù)變量isActive與hasError的true或false來確定是否綁定active與text-danger類，甚至可以將active設(shè)為計(jì)算屬性，運(yùn)算后返回true/false。

注意：綁定的屬性可以用駝峰命名法或使用短橫線來連接，但使用短橫線要用引號引起來

<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

10、v-on:給標(biāo)簽綁定函數(shù)，可以縮寫為@，例如綁定一個(gè)點(diǎn)擊函數(shù)

<p>{{msg}}</p>
<button @click="changeContent()">change</button>

在Vue的methods中實(shí)現(xiàn)changeContent函數(shù)：

  let app=new Vue({
    el:'#app',
    data:{
      msg:'第一次輸入信息',
    },
    methods:{
      changeContent(){
        this.msg="修改后的輸入信息";
      }
    }
  });

原頁面與點(diǎn)擊后：

Vue.js 為 v-on 提供了事件修飾符。修飾符是由.開頭的指令后綴來表示的，用于對事件進(jìn)行約束。例如：

<!-- 阻止單擊事件繼續(xù)傳播 --> 
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 --> 
<form v-on:submit.prevent="onSubmit"></form> 
<!-- 修飾符可以串聯(lián)使用，并且使用的順序很重要 --> 
<a v-on:click.stop.prevent="doThat"></a> 
<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 --> 
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 --> 
<div v-on:click.capture="doThis">...</div> 
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)才觸發(fā)函數(shù) --> 
<!-- 即事件不從內(nèi)部元素觸發(fā) --> 
<div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

除了點(diǎn)擊事件外，還有按鍵事件，例如按下鍵盤碼為13的按鈕時(shí)觸發(fā)：

<input v-on:keyup.13="submit">

為了方便使用vue將一些常用按鍵重命名，可以使用事件修飾符來使用，包括：.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等，也可以自定義：

Vue.config.keyCodes.f1 = 112;

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

最新評論