“:” 是指令 “v-bind”的縮寫，“@”是指令“v-on”的縮寫；“.”是修飾符。詳細如下
v-bind 指令可以用於響應式地更新 HTML 特性：
-
<div id="app-2">
-
<span v-bind:title="message">
-
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
-
</span>
-
</div>
|
-
var app2 = new Vue({
-
el: '#app-2',
-
data: {
-
message: '頁面載入於 ' + new Date().toLocaleString()
-
}
-
})
|
|
該指令的意思是：“將這個元素節點的 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 這兩個最常用的指令，提供了特定簡寫：
-
<!-- 完整語法 -->
-
<a v-bind:href="url">...</a>
-
-
<!-- 縮寫 -->
-
<a :href="url">...</a>
|
-
<!-- 完整語法 -->
-
<a v-on:click="doSomething">...</a>
-
-
<!-- 縮寫 -->
-
<a @click="doSomething">...</a>
|
它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字元，在所有支援 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地瞭解它們的作用，你會慶幸擁有它們。
修飾符
修飾符 (Modifiers) 是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
|