Vue常用的指令說明

常用的指令有：v-if, v-on, v-show, v-else, v-else-if, v-bind, v-for

1.v-if指令與v-show指令（注意區(qū)別）

v-if和v-show的區(qū)別：v-show相當(dāng)于在條件不成立的時候給元素加上一個style="display:none"

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時條件很少改變，則使用 v-if 較好。

v-if的用法注意引號：

v-if="t > 30" #若t>30則表達(dá)式成立，則渲染的內(nèi)容有效
v-if="t >== 30"
v-if="t === 30"

#demo：
<div id="app-4">
    <p v-if="t >= 30">t已經(jīng)大于30了！</p>
    <p v-if="t < 15">t已經(jīng)小于15了！</p>
    <p v-if="t = 100">great！</p>
    # 注意這個地方
    <p v-if="w === 'ab'">顯示</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-4',
        data:{
            t:100,
            w:'ab'
        }
    })
</script>

因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時需要<template>標(biāo)簽了：

<div id='app-12'>
  <template v-if="a === 'OK'">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-12',
        data:{
            a:'OK'
        }
    })
</script>

渲染的結(jié)果：

<div id="app-12">
   <h1>Title</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

v-show的用法：
注意一點：v-show 不支持 <template> 元素，也不支持 v-else。

<div id="app-5">
    <p v-show="sex==='male'">先生</p>
    <p v-show="sex==='female'">女士</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-5',
        data:{
            sex:'male',
        }
    })
</script>

2.v-else-if

用法：接v-if指令

 #注意用法若被等于的對象是字符則可以用“===”為數(shù)字則只能“=，>，<”
<div v-if="type === 'A'">   
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>

3.注意key值

Vue 會盡可能高效地渲染元素，通常會復(fù)用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

不過這樣也會造成一個弊端，就是輸入框的內(nèi)容不會刷新，若想要輸入框的內(nèi)容刷新，則需要使用key：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

4.v-for指令

這個要注意指令的位置，和django中的模板渲染位置有點不同。注意一點：v-for的優(yōu)先級比v-if的優(yōu)先級更高。
demo:

<div id='app-1'>
    <ol>
       #注意循環(huán)渲染的位置?。?！
       <li v-for="item in items">{{item.text}}</li>
    </ol>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-1',
        data:{
            items:[
                {text:'hello'},
                {text:'twy'},
                {text:'please'}
            ]
        }
    })
</script>

# 這里主要是用來說明v-for的優(yōu)先級比v-if的優(yōu)先級更高
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

5.v-bind指令

v-bind指令主要可以用來綁定style和class：
demo:

# 綁定class的demo
<div id="app-6">
    <div class="static"
         v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
         測試v-bind
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-6',
        data: {
          isActive: true,
          hasError: false
        }
    })
</script>

# 渲染的結(jié)果為：
<div class="static active">
    測試v-bind
</div>
# 若設(shè)置hasError為true：
<div class="static active text-danger">
    測試v-bind
</div>

此外，v-bind還支持和計算屬性一起用：
demo：

<div id="app-7">
    <div v-bind:class="classObject">v-bind計算屬性</div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-7',
        data:{
            isActive:true,
            error:null
        },
        computed: {
            classObject:function(){
                return {
                    'active':this.isActive && !this.error,
                    'text-danger': this.error 
                }
            }
        }
    })
</script>

# 渲染的結(jié)果為：
<div class="active">v-bind計算屬性</div>
# 若修改error的值為1，則有：
<div class="text-danger">v-bind計算屬性</div>

v-bind還支持?jǐn)?shù)組語法操作以及三元操作：
demo如下：

<div id="app-8">
    <div v-bind:class="[activeClass, errorClass]">數(shù)組語法</div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-8',
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })
</script>

# 渲染的結(jié)果如下：
<div class="active text-danger">數(shù)組語法</div>

# 根據(jù)條件的三元操作如下：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
# 這會根據(jù)isActive是否為真來顯示activeClass 的內(nèi)容

但在v-bind中使用過多的三元操作會使代碼顯得很難懂，于是，有了數(shù)組語法中使用對象語法的用法：

<div id="app-9">
    <div v-bind:class="[{ active: isActive }, {errorClass: errors}]">騷操作</div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-9',
        data:{
            isActive:1,
            activeClass:'active',
            errorClass:'text-danger',
            errors:0,
        }
    })
</script>

# 渲染的結(jié)果：
<div class="active">騷操作</div>
# 若將errors置為1，則會渲染出的結(jié)果：
<div class="active errorClass">騷操作</div>

組件的v-bind使用：(要注意的是，組件的注冊必須在實例化之前)

<div id="app-10">
    <my-component v-bind:class="{ active: isActive }">組件v-bind</my-component>
</div>
<script type="text/javascript">
    Vue.component('my-component',{
        template:'<p class="you"></p>'
    })
            
    new Vue({
        el:'#app-10',
        data:{
            isActive:1,
        }
    })
</script>

# 錯誤的例子：
<div id="app-10">
    <my-component v-bind:class="{ active: isActive }">組件v-bind</my-component>
</div>
<script type="text/javascript"> 
    new Vue({
        el:'#app-10',
        data:{
            isActive:1,
        }
    })

    Vue.component('my-component',{
        template:'<p class="you"></p>'
    })
        
</script>

v-bind來綁定style

<div id="app-11">
    <!-- 對象語法 -->
    <div v-bind:style="{ color: activeColor,fontSize: fontSize + 'px'}">v-bind style</div>
    <div v-bind:style="styleObject">v-bind style2</div>
    <!-- 數(shù)組語法 -->
    <div v-bind:style="[baseStyle, overridingStyles]">v-bind style3</div>
    <!-- 從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數(shù)組，常用于提供多個帶前綴的值，這樣寫只會渲染數(shù)組中最后一個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會渲染 display: flex -->
    <div v-bind:style="{ display:['-webkit-box','-ms-flexbox','flex']}">v-bind style4</div>
</div>
<script>
    new Vue({
        el:"#app-11",
        data:{
            activeColor:'red',
            fontSize:30,
            styleObject:{
                color:'red',
                    fontSize:'15px'
            },
            baseStyle:{
                color:'blue'
            },
            overridingStyles:{
                fontSize:'30px'
            },
        }
    })
</script>

6.v-on指令

<div id="app-13">
    <!-- 監(jiān)聽事件 -->
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button has been clicked {{ counter }} times.</p>
    <!-- 事件處理方法 -->
    <button v-on:click="greet">Greet</button>
    <!-- 內(nèi)聯(lián)js語句中調(diào)用方法 -->
    <button v-on:click="say('hi')">Say hi</button>
    <!-- 使用特殊變量$event -->
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-13',
        data:{
            counter:0,
            name:'Vue.js',
        },
        // 在 `methods` 對象中定義方法
        methods:{
            greet:function(event){
                // 'this'在方法里指向當(dāng)前的Vue實例
                alert('Hello'+ this.name + '!')
                // `event` 是原生 DOM 事件
                if(event){
                    alert(event.target.tagName)
                }
            },
            say: function (message) {
              alert(message)
            },
            warn: function (message, event) {
                // 現(xiàn)在我們可以訪問原生事件對象
                if (event) event.preventDefault()
                alert(message)
            },
        }
    })
</script>

事件修飾符：

<!-- 阻止單擊事件繼續(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>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤其能夠提升移動端的性能。不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止對元素自身的點擊。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這里先說一下vue的特點，最近一直在學(xué)vue，感覺比ng好用。 Vue.js特點： 1.簡潔：頁面...
    破浪_閱讀 533評論 0贊 5
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容，還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,177評論 0贊 29
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性：var data = { a:...
    云之外閱讀 2,372評論 0贊 6
  • 今天看到一篇報道很生氣說傳統(tǒng)文學(xué)瞧不起網(wǎng)文小說！就因為寫小說的稿費比你掙得多？我們應(yīng)該包容并尊重各種文學(xué)，并要相互...
    星空仰望_9d30閱讀 274評論 0贊 0
  • 我記得那個午夜的時刻 當(dāng)城市的光只剩下路燈下的紅綠燈 我的起身和離去都在這樣的時刻 昏暗的建筑看不清標(biāo)識 像是換了...
    許你一世諾言閱讀 318評論 1贊 3

友情鏈接更多精彩內(nèi)容