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>