vue指令和特殊特性

happy137發表於2017-12-28
Vue

v-text

用於更新元素的純文字。 v-text指令類似於“Mustache”語法 (雙大括號)。 看例子：

<h5>示例1：簡單使用</h5>
v-text: <span v-text="message"></span>
<br>
差值：<span>{{message}}</span>

<h5>示例2：使用表示式</h5>
v-text: <span v-text="number + 1"></span><br>
差值：<span>{{number + 1}}</span>
複製程式碼
示例1：簡單使用

v-text: Hello Vue! 
差值：Hello Vue!

示例2：使用表示式

v-text: 2
差值：2
複製程式碼

區別：如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h5>示例3：字串拼接</h5>
v-text: <span v-text="'hello ' + msg"></span><br>
差值：<span>hello {{msg}}</span>
複製程式碼
示例3：字串拼接

v-text: hello world
差值：hello world
複製程式碼

v-html

  • 用於更新元素的 innerHTML。
  • 內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。
  • scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。

v-show

用於根據條件展示元素。

與v-if的區別：

  • v-if是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。v-show只是簡單的切換display屬性。

    <!-- ok為false -->
<h5>示例1：display切換</h5>
v-show: <span v-show="ok">Hello</span>
<br>
v-if：<span v-if="ok">Hello</span>
<!--展現的元素-->
<span style="display: none;">Hello</span>
複製程式碼

  • v-if是惰性的，直到條件第一次變為真時，才會開始渲染條件塊。v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

  • 如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

  • v-if支援使用template元素切換多個元素，v-show不支援。

    <h5>示例2：v-if可以切換多個元素</h5>
<template v-if="ok">
  <h6>Title</h6>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<template v-show="ok">
  <h6>Title</h6>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
複製程式碼

    執行結果如下：ok為false，v-if有效，v-show無效。

    Title

Paragraph 1

Paragraph 2
複製程式碼

v-if，v-else，v-else-if

  • v-else前一兄弟元素必須有 v-if 或 v-else-if。
  • v-else-if前一兄弟元素必須有 v-if 或 v-else-if。
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
複製程式碼

v-for

基於源資料多次渲染元素或模板塊。資料格式Array | Object | number | string

  • Array

    可以使用item in items或item of items的格式

    <h5>陣列示例1：of</h5>
  <ul>
    <li v-for="item of items">
      {{ item.message }}
    </li>
  </ul>
  
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
複製程式碼

    結果為：

    陣列示例1：of

Foo
Bar
複製程式碼

    可以有item和索引index

    <h5>陣列示例2：</h5>
  <ul>
    <li v-for="(item, index) in items">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
複製程式碼

    結果為：

    陣列示例2：

0 - Foo
1 - Bar
複製程式碼

  • Object

    物件格式也可以和陣列一樣，使用of。 物件還可以有key，鍵值。

    <h5>物件示例3：</h5>
  <ul>
    <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  object: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  }
複製程式碼

    結果為：

    物件示例3：

0. firstName: John
1. lastName: Doe
2. age: 30
複製程式碼

  • number

    也可以取整數。

    <h5>number示例4：</h5>
  <div>
    <span v-for="n in 10">{{ n }} </span>
  </div>
複製程式碼

    結果為：

    number示例4：

1 2 3 4 5 6 7 8 9 10
複製程式碼

  • string

    與number類似。

    <h5>string示例5：</h5>
  <div>
    <span v-for="n in msg">{{ n }} </span>
  </div>
  msg: 'abc'
複製程式碼

    結果為：

    string示例5：

a b c
複製程式碼

v-on

監聽事件

  • v-on 同樣支援不帶引數繫結一個事件/監聽器鍵值對的物件。注意當使用物件語法時，是不支援任何修飾器的。
  • 用在普通元素上時，只能監聽 原生DOM事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。
  • 在監聽原生 DOM 事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。
<h5>示例1：直接寫邏輯</h5>  
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>

<h5>示例2：事件處理方法</h5>
<button v-on:click="greet">Greet</button>

<h5>示例3：物件語法</h5>
<button v-on="{ mousedown: doThis, mouseup: doThat }">obj</button>
複製程式碼

v-bind

v-model

  • 在文字區域插值並不會生效，應用 v-model 來代替。
  • v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值。

v-pre

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

<span v-pre>{{ msg }}</span>
msg: 'A'
複製程式碼

結果為：

{{ msg }}
複製程式碼

v-cloak

這個指令保持在元素上直到關聯例項結束編譯。

[v-cloak] {
  display: none;
}

<h5>不新增v-cloak</h5>  
<div>
  {{ msg }}
</div>
    
<h5>新增v-cloak</h5>
<div v-cloak>
 {{ msg }}
</div>

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000) 
複製程式碼

初始情況：

不新增v-cloak

{{ msg }}
新增v-cloak
複製程式碼

兩秒後：

不新增v-cloak

hello
新增v-cloak

hello
複製程式碼

v-once

當資料改變時，插值處的內容不會更新。 只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

<h5>單個元素</h5>
差值：{{ message }}
<br>
<span v-once>v-once： {{ message }} </span>

<h5>有子元素</h5>
差值：
<div>
  <span>comment</span>
  <span>{{message}}</span>
</div>
<br>
v-once:
<div v-once>
  <span>comment</span>
  <span>{{message}}</span>
</div>

message: 'Hello Vue!'
複製程式碼

初始渲染結果為：

單個元素

差值：Hello Vue! 
v-once： Hello Vue!
有子元素

差值：
comment Hello Vue!

v-once:
comment Hello Vue!
複製程式碼

改變message為aaa,渲染結果為：

單個元素

差值：aaa 
v-once： Hello Vue!
有子元素

差值：
comment aaa

v-once:
comment Hello Vue!
複製程式碼

key

具體應用見：https://www.zhihu.com/question/61064119/answer/183717717

key的作用主要是為了高效的更新虛擬DOM

有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

  • 完整地觸發元件的生命週期鉤子
  • 觸發過渡

ref

用來給元素或子元件註冊引用資訊。

  • 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素;
    <h5>示例1：普通DOM元素</h5>
<p ref="p">hello</p>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.p) // <p>hello</p>
    }
  )  
}
複製程式碼
  • 當 ref 和 v-for 一起使用時，獲取到的引用會是一個陣列。
    <h5>示例2：和for結合使用</h5>
<ul>
  <li v-for="n in 10" ref="arr">{{ n }}</li>  
</ul>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.arr) // [li, li, li, li, li, li, li, li, li, li]
    }
  )  
}
複製程式碼
  • 如果用在子元件上，引用就指向元件例項;
    <h5>示例3：元件</h5>
<my-component ref="profile"></my-component>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.profile) // VueComponent
    }
  )  
}
複製程式碼
  • ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！
    created: function () {
 console.log(this.$refs.p) // undefined
 console.log(this.$refs.arr) // undefined
 console.log(this.$refs.profile)  // undefined 
}
複製程式碼
  • $refs 也不是響應式的，因此你不應該試圖用它在模板中做資料繫結。應當避免在模板或計算屬性中使用 $refs。

is

用於動態元件且基於 DOM 內模板的限制來工作。

  • 動態元件(根據繫結的資料選擇不同元件渲染)
    <div id="app">
  <component :is="currentView"></component>
</div>

data: {
  currentView: 'home'
},
components: {
  'home': {
    template: '<div>home</div>'  
  },
  'posts': {
    template: '<div>posts</div>'  
  }  
}
複製程式碼
  • DOM內模板的限制
    <h5>示例2：DOM內模板的限制</h5>
  <table>
    <tr is="my-row"></tr>  
  </table>
複製程式碼

相關文章