Vue常用技巧收录

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 14.0px "Helvetica Neue" }

1.删除数组索引

//在数组中删除一项标准做法是用 Array.splice(index,1)
del( index ) { this.arr.splice(index,1)  }
//Vue.js2.2.0+版本中 可以直接使用Vue.delete
del ( index ) { this.$delete ( this.arr , index ) }

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 14.0px ".PingFang SC" }

demo:

https://ccforward.github.io/demos/vue-tips/delete.html

2.选中input框中文字

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

调用select()方法即可

<input @focus="$event.target.select()">

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

组件中调用就需要加上native属性

<component @focus.native="$event.target.select()"></component>

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 14.0px "Helvetica Neue" }

demo:

https://ccforward.github.io/demos/vue-tips/select.html

3.私有属性

data: {
  name: ‘name‘,
  _name: ‘name‘
},
mounted() {
 	console.log(this.name);		//name
	console.log(this._name);		//undefined
}

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

以_或者$开头的属性只能Vue自身使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }

demo

https://codepen.io/ccforward/pen/BZqrNj

4.debounce延迟计算watch属性

debounce去抖 尤其适合在输入这种高频的操作中实时计算属性值

text: _.debounce(function () {
    this.inputing = false
  }, 1000)