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