Vue.js指令

Vue.js使用的模板語言是HTML的超集。我們可以使用插值和指令。本文介紹了指令。


我們看到了Vue.js模板和插值如何將數據嵌入Vue模板中。

本文介紹了Vue.js在模板中提供的另一種技術:指令

指令基本上類似於在模板內部添加的HTML屬性。他們都以v-,表示這是Vue的特殊屬性。

讓我們詳細了解每個Vue指令。

v-text

除了使用插值法,您還可以使用v-text指示。它執行相同的工作:

<span v-text="name"></span>

v-once

你知道如何{{ name }}綁定到name組件數據的屬性。

任何時間name組件數據中的更改,Vue將更新瀏覽器中表示的值。

除非您使用v-once指令,基本上類似於HTML屬性:

<span v-once>{{ name }}</span>

v-html

使用插值打印數據屬性時,將轉義HTML。這是Vue自動防護的絕佳方式XSS攻擊。

但是,在某些情況下,您想輸出HTML並讓瀏覽器解釋它。您可以使用v-html指示:

<span v-html="someHtml"></span>

v-bind

插值僅適用於標籤內容。您不能在屬性上使用它。

屬性必須使用v-bind

<a v-bind:href="url">{{ linkText }}</a>

v-bind非常普遍,以至於它有一個簡寫的語法:

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

雙向綁定使用v-model

v-model例如,讓我們綁定一個表單輸入元素,並在用戶更改字段內容時使其更改Vue數據屬性:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

使用表達式

您可以在指令內使用任何JavaScript表達式:

<span v-text="'Hi, ' + name + '!'"></span>
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

指令中使用的任何變量都引用相應的data屬性。

有條件的

在指令內部,您可以使用三元運算符執行條件檢查,因為這是一個表達式:

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

有專用的指令,可讓您執行更有條理的條件:v-ifv-elsev-else-if

<p v-if="shouldShowThis">Hey!</p>

shouldShowThis是包含在組件數據中的布爾值。

循環

v-for允許您呈現項目列表。與它結合使用v-bind設置列表中每個項目的屬性。

您可以迭代一個簡單的值數組:

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script> export default { data() { return { items: [‘car’, ‘bike’, ‘dog’] } } } </script>

或在一組對像上:

<template>
  <div>
    <!-- using interpolation -->
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
    <!-- using v-text -->
    <ul>
      <li v-for="todo in todos" v-text="todo.title"></li>
    </ul>
  </div>
</template>

<script> export default { data() { return { todos: [ { id: 1, title: ‘Do something’ }, { id: 2, title: ‘Do something else’ } ] } } } </script>

v-for可以使用以下方式為您提供索引:

<li v-for="(todo, index) in todos"></li>

大事記

v-on允許您偵聽DOM事件,並在事件發生時觸發方法。在這裡,我們監聽點擊事件:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

<script> export default { methods: { handleClick: function() { alert(‘test’) } } } </script>

您可以將參數傳遞給任何事件:

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(value) { alert(value) } } } </script>

可以將少量JavaScript(單個表達式)直接放入模板中:

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>

<script> export default { data: function() { return { counter: 0 } } } </script>

click只是一種事件。一個常見的事件是submit,您可以使用綁定v-on:submit

v-on非常普遍,以至於它有一個簡寫的語法,@

<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>

有關更多詳細信息v-on在裡面Vue活動

顯示或隱藏

如果Vue實例的特定屬性評估為true,則可以選擇僅在DOM中顯示元素。v-show

<p v-show="isTrue">Something</p>

元素仍插入DOM中,但設置為display: none如果不滿足條件。

事件指令修飾符

Vue提供了一些可選的事件修飾符,您可以將其與v-on,它會自動使事件執行某些操作,而無需您在事件處理程序中對其進行顯式編碼。

一個很好的例子是.prevent,它會自動調用preventDefault()在事件上。

在這種情況下,該表單不會導致頁面被重新加載,這是默認行為:

<form v-on:submit.prevent="formSubmitted"></form>

其他修飾語包括.stop.capture.self.once.passive他們是官方文檔中有詳細描述

自定義指令

Vue的默認指令已經可以讓您完成很多工作,但是您可以隨時添加新的自定義指令。

https://vuejs.org/v2/guide/custom-directive.html如果您有興趣了解更多信息。

免費下載我的Vue手冊


更多vue教程: