<!-- 通过 prop 修饰符绑定 DOM 属性 (property) --> <div v-bind:text-content.prop="text"></div> <!-- .camel 修饰符(2.1.0+)将 v-bind 属性名称 kebab-case 驼峰化为 camelCase --> <svg :view-box.camel="viewBox"></svg> <!-- .sync 修饰符(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器--> <text-document v-bind:title.sync="doc.title"></text-document> <!-- 批量绑定，将 doc 对象中的每一个属性 (如 title) 都作独立的 prop ，各自添加 v-on 监听器--> <text-document v-bind.sync="doc"></text-document>
v-on || @ 监听事件
v-on 用于动态绑定事件监听器，使用 v-on:someEvent = "someFunction"或者语法糖 @someEvent = "someFunction"就可以监听 someEvent 进行交互。
基本用法
@someEvent 调用的方法名后面可以不跟（），例如：
<a :href="url" :id="linkID">链接</a> <!-- 监听一个事件 --> <button @click="changeFun">change button</button>
可以在 methods 中添加函数：
// 部分 JS 代码 methods :{ changeFun : function () { this.linkID = 'changeID' // 指向当前组件本身 } }
点击 button 按钮后 a 元素的 id 改变：
<a href="https://www.baidu.com/">链接</a>
当然 v-on 还可以使用对象语法监听多个事件：
<!-- v2.4.0+ --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
对于在 HTML 元素上监听的事件，当 ViewModel 销毁时，所有的事件处理器会自动删除，无需自己清理。
修饰符
Vue 可以将原生事件对象参数 event 传入事件方法中，并提供了特殊变量$event用来访问元素 DOM 事件。此外可以通过一些事件修饰符来实现特定的事件，如 .stop、.prevent、.capture、.once 等，常用的使用示例：
<!-- 停止单击事件冒泡，调用 event.stopPropagation()--> <button @click.stop="doThis"></button> <!-- 阻止默认行为，调用 event.preventDefault() --> <button @submit.prevent="doThis"></button> <!-- 添加事件侦听器时使用 capture 事件捕获模式 --> <button @click.capture="doThis"></button> <!-- 点击回调只会触发一次 --> <button @click.once="doThis"></button> <!-- 只当点击鼠标左键时触发(2.2.0) --> <button @click.left="doThis"></button> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button>
此外，v-on 还提供按键修饰符来监听键盘事件，键值为 .keyCode，常用有.entry、.delete、.tab、.esc、.space、.down等，如下：