vue中常用的缩写(Abbreviations commonly used in Vue)

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

绑定数据 v-bindv-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>// JSdata() {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-onv-on 的缩写是 @

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

————————

As a visual cue, the v-prefix is used to identify Vue specific attributes in the template. When you’re using Vue When JS adds dynamic behavior to existing tags, the v-prefix is very helpful. However, for some frequently used instructions, it will feel cumbersome to use. At the same time, when building a single page application < strong > (SPA – single page application) < / strong > with all templates managed by Vue, the v-prefix becomes less important. Therefore, Vue provides specific abbreviations for the two most commonly used instructions, # v-bind # and # v-on #:

The abbreviation of binding data v-bindv-bind is:

SetAttribute can be used to set, and the attributes obtained by getattribute can use this dynamic binding

List some frequently used, such as:: title,: class,: style,: key,: item,: index,: SRC,: href

example:

// HTML<div v-bind:title=”message”>绑定数据</div><div :title=”message”>绑定数据</div>//上面两种写法都能渲染成下面这样<div title=”现在的时间 –》 2020-10-29 19:25:38″>绑定数据</div>// JSdata() {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(‘:’));},}

The abbreviation for listening event v-onv-on is@

Common events include @ click click click event, @ change e field content change trigger event, @ mouseenter mouse in event, @ mouseleave mouse out event, @ MouseMove mouse movement event, @ MouseDown mouse down event, @ mouseup mouse release event, @ input input text trigger event, @ focus acquisition event, @ blur loss of focus event, etc