Vue經常使用技巧收錄

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

demo:

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

2.選中input框中文字

調用select()方法便可

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

組件中調用就須要加上native屬性

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

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
}

以_或者$開頭的屬性只能Vue自身使用

demo

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

 

4.debounce延遲計算watch屬性

debounce去抖 尤爲適合在輸入這種高頻的操做中實時計算屬性值

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