vue中常用的缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

绑定数据 v-bind
v-bind 的缩写是 ：

可以使用 setAttribute 设置 ， getAttribute 获取的属性都可以使用这种动态绑定

列举一些使用频率比较高的，比如：
:title、:class、:style、:key、:item、:index、:src、:href

例子：

// HTML
<div v-bind:title="message">绑定数据</div>
<div :title="message">绑定数据</div>
//上面两种写法都能渲染成下面这样
<div title="现在的时间 --》 2020-10-29 19:25:38">绑定数据</div>

// JS
data() {
return {
message: '现在的时间--》' + this.formatTime(new Date()),
};
},
methods: {
fillZero(n) {
return n < 10 ? '0' + n : n;
},
formatTime(time) {
var year = time.getFullYear(),
month = time.getMonth() + 1,
date = time.getDate(),
hours = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
var Hours = this.fillZero(hours);
var Minutes = this.fillZero(minutes);
var Seconds = this.fillZero(seconds);
return (
[year, month, date].join('-') +
' ' +
[Hours, Minutes, Seconds].join(':')
);
},
}

监听事件 v-on
v-on 的缩写是 @

常用的有@click点击事件、@change域的内容发生改变时触发的事件、@mouseenter鼠标移入事件、@mouseleave鼠标移出事件、@mousemove鼠标移动事件、@mousedown鼠标按下事件、@mouseup鼠标松开事件、@input输入文本时触发的事件、@focus获取焦点事件、@blur失去焦点事件等等