vue进阶（二）

v-on（事件监听）

• 基本使用

  • 作用：绑定事件监听

  • 缩写：@

绑定方法传递事件，需要同时传入某个参数以及event，可以通过$event传入事件

• v-on的修饰符

  • 停止冒泡

    @click.stop="doThis"：调用event.stopPropagation()

  • 阻止默认行为

    @click.prevent="doThis"：调用event.preventDefault()

  • 阻止默认行为，没有表达式

    @submit.prevent

  • 串联修饰符

    @click.stop.prevent="doThis"

  • 键修饰符，键别名

    @keyup.enter="onEnter"

  • 键修饰符，键代码

    @keyup.13="onEnter"

  • 点击回调仅触发一次

    @click.once="doThis"

  • 监听自定义组件

    @click.native="doThis"

key属性

主要解决与虚拟dom对比复用的问题，key值不同就会重新渲染，而不会复用

v-show与v-if区别

• v-show

  • 当条件为false时，v-show只是给我们的元素添加了一个行内样式display:none

• v-if

  • 当条件为false时，包含v-if指令的元素根本就不会存在于dom中

切换频率高时采用v-show，只切换一两次使用v-if

v-for遍历对象与数组

• 遍历数组

• 遍历对象

  • 遍历对象的过程中，如果获取一个值，则取到的就是value

  • 获取元组（value, key）这样才能同时获取到对象的key-value组合

也可以获取（value, key, index），其中index为索引值

• key值绑定与否

  • key值尽量不要绑定index索引，有key的时候会将值与key先一一对应起来

  • 没有key的时候，会依次从插入位置向后排

数组中的响应式方法

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

通过索引值来修改数组中的元素不是响应式的

• 可通过set方法实现响应式

  /*set(要修改的对象, 索引值, 修改后的值)*/

  Vue.set(this.arr, 0, 'newValue')

过滤器

作用：用于进行文本内容格式化处理，可在插值表达式和v-bind中使用

语法：{{ data | filter1(参数) | filter2(参数) }}

• 局部过滤器

  // 定义在vue的filters中

  filters:{
    // 保留小数点后n位小数
    number: (data,n)=>{
      return data.toFixed(n)
    }
  }

• 全局过滤器

  // 全局定义在main.js（项目入口文件）中

  Vue.filter(过滤器名称, function(data){
    // data是传入过滤器的数据
    return 格式化后的格式
  })