vue事件+vue过滤器

Vue事件

1. 指令 v-on 事件类型 @事件类型
2. 格式

	v-on:eventType="事件处理程序名称"
	<button v-on:click='normalHandler'>普通事件</button>
	//简写@click

3. 执行的方法有参数

 <button @click="getEvent">获取参数</button>
 getEvent(e){
  console.log(e);
}

键盘事件的相关参数

e.target =e.srcElement 当前事件源
e.keyCode =e.which 按键字符的ASCLL码
e.key =e.keyChar 按键字符

鼠标事件的相关参数

e.timeStamp 触发的事件间隔
e.clienty/e.clientY
e.pageX/e.pageY
e.target/e.srcElement

4. 事件的修饰符

1.stop 阻止事件传播，取消冒泡
2.prevent 提交事件不在重载页面
3.self 阻止事件不从内部触发
4.once 点击事件将只会触发一次
5.self 相当于事件的委托 当前的触发元素是自身的时候，才能执 行当前事件的函数（即事件不是从内部元素触发）
6.capture 类似于元素js里面的捕获 从外到里
7.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，这其中包含 event.preventDefault() 的情况，.passive 修饰符尤其能够提升移动端的性能。

vue获取虚拟dom元素（虚拟DOM和真正的DOM有一层映射关系）
使用虚拟DOM来更新DOM节点，可以提升渲染性能。

  HTML:<p ref="name">我在打游戏</p>
  <button @click="getDom">获取dom元素</button>
  <p>{{arr | mysort}}</p>
  js:getDom(){
  //获取dom元素
  console.log('====================================');
  console.log(this.$refs.name);
  console.log('====================================');
  //调用计算属性
  this.changeValue;
}

refs获取虚拟dom

1. 说明： vm.$refs 是一个对象，拥有已注册过 ref 的所有元素(或者子组件)

2. 使用： 在HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

3. 注意： 如果获取的是一个子组件，通过 ref 就能获取到子组件中的 data 和 methods

过滤器：filters

使用
1. 在html中使用：{{变量 | filters 中定义的方法}}
2. filters:{ } 中定义所有管道符后面的方法

过滤器的常规用法：

	HTML:<input type="text" v-model="textsex" />
  	<p>{{sex| mysort }}</p>
  	js:sex:[1,2,5,6,8,9,3,4];
  	filters:{
    mysort(val){
      let [...array]=[...val];
      array.sort((a,b)=>(b-a));
      return array;
    }
    }

v-for（ 换个方式写过滤器 ）

HTML：<p>
  <span v-for="(item,index) in forSort()" :key="index">{{item}}</span>
</p>
JS：forSort(){
    //在方法里面变相去写过滤器
    //写的是对整个数据处理
    this.arr.sort((a,b)=>(b-a));
    return this.arr;
}

计算属性（computed+同步+函数都是带返回值）:

写在computed中
1.写起来像一个方法，用起来像一个属性（本质就是一个属性）
2.注意点：
只要跟计算属性相关的数据发生了改变，计算属性就会重新计算，不相关的值发生变化，不会重新计算计算属性
一定要有返回值
3.什么时候使用计算属性
-根据已知data中的值，生成一个额外的新值，且新值还要跟着data中的值变化而变化
4.computed里面的计算属性名不能和data中的属性名重名

计算属性默认只有getter，不过在需要时你也可以提供一个setter

1. get用法

<div class="computed_watch">
    <P>我的姓名:{{message}}</P>
    <P>我的姓名:{{reversedMessage}}</P>
</div> 
data() {
      return {
        message: 'Hello',
     }
    },
//message改变的时候 reversedMessage的结果也会改变
computed: {
     reversedMessage: function () { 
      return this.message.split('').reverse().join('')
    }
}

2. set用法

   data() {
      return {
        firstName: 'Foo',
        lastName: 'Bar'
 
      }
    },
 
 
    computed: {
      fullName: {
        // getter    改变firstName lastName的时候  fillName会跟着一起改
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter    改变fillName的时候 firstName   lastName会跟着一起改
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }    
    },

监听属性（watch+可以实现异步+）：

可以通过watch监听一个属性值的变化，只要值发生了变化，就会调用watch的一些方法
watch是vm的一个配置项
监听的属性按照一个方法的格式来写

  watch: {
    obj: {
      handler(newval, oldval) {
        console.log(newval, oldval);
        //检测值是一样的  监听里面早知道变化的时间
      }
    },
    num(newval, oldval) {
      //监听的是值
      // newval   oldval
      console.log("====================================");
      console.log(newval, oldval);
      console.log("====================================");
      //相关代码
    },
    arr: {
      //数组也可以使用简单监听
      handler(newval, oldval) {
        // console.log(newval, oldval);
      }
    }
  }
}