1.“:” 是指令 “v-bind”的缩写，

<!-- 完整语法 --><a v-bind:href="url">...</a>
<!-- 缩写 --><a :href="url">...</a>

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()}})

2.@”是指令“v-on”的缩写；

<!-- 完整语法 --><a v-on:click="doSomething">...</a>
<!-- 缩写 --><a @click="doSomething">...</a>

它们不会出现在最终渲染的标记中。缩写语法是完全可选的

.

@就是是当前项目的路径

v-on 指令，它用于监听 DOM 事件：

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

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。

3 . .修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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