vue中“:”、“.”、“@”意義

布拉格的愛發表於2020-10-10
Vue

“:” 是指令 “v-bind”的縮寫，“@”是指令“v-on”的縮寫；“.”是修飾符。詳細如下

v-bind 指令可以用於響應式地更新 HTML 特性：

 

  1. <div id="app-2">

  2. <span v-bind:title="message">

  3. 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！

  4. </span>

  5. </div>

 

  1. var app2 = new Vue({

  2. el: '#app-2',

  3. data: {

  4. message: '頁面載入於 ' + new Date().toLocaleString()

  5. }

  6. })

該指令的意思是：“將這個元素節點的 title 特性和 Vue 例項的 message 屬性保持一致”。如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新訊息'，就會再一次看到這個繫結了 title 特性的 HTML 已經進行了更新。

v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">...</a>

 

v- 字首作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標籤新增動態行為 (dynamic behavior) 時，v- 字首很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue.js 管理所有模板的單頁面應用程式 (SPA - single page application) 時，v- 字首也變得沒那麼重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind 縮寫

 

  1. <!-- 完整語法 -->

  2. <a v-bind:href="url">...</a>

  3.  

  4. <!-- 縮寫 -->

  5. <a :href="url">...</a>

v-on 縮寫

 

  1. <!-- 完整語法 -->

  2. <a v-on:click="doSomething">...</a>

  3.  

  4. <!-- 縮寫 -->

  5. <a @click="doSomething">...</a>

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字元，在所有支援 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地瞭解它們的作用，你會慶幸擁有它們。

修飾符

修飾符 (Modifiers) 是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：

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

相關文章