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)