vue使用小技巧

1. lazy

<!-- lazy 代替change事件，焦点失去改变-->
<input type="text" v-model.lazy="msg">
{{msg}}

2. number

<!-- number-->
<input type="text" v-model.number="msg" @input="changeInput"/>
{{msg}}

3. trim

<!--trim 删除input中前后空格，在change的时候触发-->
<input type="text" v-model.trim.lazy="msg"/>
{{msg}}

4. js中的delete & Vue.delete

<ul>
  <li v-for="(item, index) in arr" :key="index">{{item}}</li>
</ul>
<button @click="arrDel">删除</button>

<div>
    <span>{{obj.name}}</span> - <span>{{obj.age}}</span> - <span>{{obj.work}}</span>
    <button @click="objDel">删除</button>
</div>


export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      arr: [1,2,3,4],
      obj: {
        name: 'jsbin',
        age: 26,
        work: 3,
      }
    }
  },
  methods: {
    changeInput ($elent) {
      console.log(Vue)
    },
    arrDel () {
      // js
      delete this.arr[1]
      // this.arr.splice(1,1)
      // console.log(this.arr)

      // vue -------------------> $set & $delete
      this.$delete(this.arr, 1)
      console.log(this.arr)
    },
    objDel () {
      // js
      // delete this.obj.age
      // console.log(this.obj)

      // vue
      this.$delete(this.obj, 'name')
    }
  }
}

5. 事件的修饰符

stop 阻止冒泡，调用 event.stopPropagation()
prevent 阻止默认行为，调用 event.preventDefault()；比如a标签，form表单的submit按钮
once，事件只执行一次
capture先执行父级的函数，再执行子级的触发函数

// 执行结果 1，2
<div @click.capture='conSole(1)' style="width: 100px; height: 100px; background-color: black;">
  <div @click='conSole(2)' style='width: 50px; height: 50px; margin: 0 auto; background-color: white;'>
  </div>
</div>

self是只执行本身的函数

// 执行结果 2；1不会输出
<div @click.self='conSole(1)' style="width: 100px; height: 100px; background-color: black;">
  <div @click='conSole(2)' style='width: 50px; height: 50px; margin: 0 auto; background-color: white;'>
    123
  </div>
</div>

passive这个修饰符会执行默认方法。

浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿

通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

==注：passive和prevent冲突，不能同时绑定在一个监听器上。==

6. 键盘事件

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

7. 组合键

.ctrl
.alt
.shift
.meta

8. exact 只有被修饰的按钮才会被触发

9. 鼠标按钮修饰符

.left
.right
.middle

10. Vue.observable()

创建一个响应对象，必须在一个Vue实例中配置。现在我们可以在Vue实例外部，通过使用Vue.observable(data)创建

<!--html-->
{{stateCount}} --- {{numB}}

<!-- js -->
import Vue from 'vue'
let state = Vue.observable ({
   counter: 0,
})
let num = 1
setTimeout(function(){ state.counter ++; num++; console.log(state.counter) }, 3000);

computed: {
    stateCount () {
      return state.counter
    },
    numB () {
      return num
    }
},

11. filters

在vue 2.x版本之后vue内置的过滤器被删除了,只能自定过滤器；全局自定定义，局部自定义
https://github.com/PsChina/easy-filter

12. directive

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

// 自定义指令清除空客
Vue.directive('trim', {
  componentUpdated: function (el) {
    el.value = el.value.replace(/^\s+|\s+$/g, '')
  }
})