Vue事件的基本操作你知道嗎

2022-02-24 19:00:15

1. 事件的基本操作

1.1 v-on

功能：繫結指定事件名的回撥函數

標準寫法：
v-on:click='xxx'
v-on:keyup='xxx(引數)'
v-on:keyup.enter='xxx'
簡便寫法：
@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'

1.1.1 v-on的小案例

 <div id="root">
        <!-- 需求當點選按鈕時彈出同學你好！ -->
        <h1>歡迎來到{{name}}學習</h1>
        <!--   v-on:xxx可以簡寫為： @xxx   -->
        <button v-on:click="btn1">點選我進行學習（不傳參）</button> 
        <button @click="btn2('hello!','同學',$event)">點選我進行學習（傳參）
				//如果需要傳引數的話就在後面加（），裡面寫的就引數
    </div>

    <script>
        /* 
            事件回撥需要寫在methods物件中，最終會在vm上
            methods中設定的函數，不要使用箭頭函數
            methods中設定的函數，this指向vm或者是元件範例化物件
        */
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: "清華大學"
            },
            methods: {
                btn1() {
                    alert("同學你好！")
                },
                btn2(x, y, event) {
                    console.log(x, y);
                    console.log(event.target.innerText);
                    alert("同學你好！")
                }
            }
        })
    </script>

1.2 事件修飾符

 Vue中的事件修飾符有6個            - prevent : 阻止預設行為            - stop : 禁止冒泡            - once : 事件只觸發一次            - capture : 使用事件捕獲模式            - self : 只有even.target所指向的操作元素才能觸發事件            - passive : 讓事件的預設行為立即執行<body>
    <div id="root">
        <!-- 1. prevent : 阻止預設行為 -->
        <a href="https://www.bilibili.com/" @click.prevent = "prevent">點選我進入b站</a>
        <hr>
        <!-- 2. stop : 禁止冒泡 -->
        <div @click = "stop" class="div1">
            <button @click.stop = "stop">點選我觸發事件</button>
        </div>
        <hr>
        <!-- 3. once : 事件只觸發一次 -->
        <button @click.once = "once">我只能觸發一次哦</button>
        <hr>
        <!-- 4. capture : 使用事件捕獲模式 -->
        <div class="box1" @click.capture = "capture(1)">
            div1
            <div class="box2" @click = "capture(2)">
                div2
            </div>
        </div>
        <hr>
        <!-- 5. self : 只有even.target所指向的操作元素才能觸發事件 
                相當於要滿足兩個條件
                    - 1. event.target必須指向self所修飾的元素
                    - 2. 觸發的也必須是這個元素
                    從某種意義上相當於禁止了冒泡，因為冒泡雖然觸發上面事件
                    但是event.target所指向的並非是這個元素
        -->
        <div class="box3" @click.self = "self">
            <button @click = "self">點選我</button>
        </div>
        <hr>
        <!-- 6. passive : 讓事件的預設行為立即執行 
            scroll:表示的是卷軸進行卷動，卷軸改變就觸發，並且滑到底就不能繼續觸發
            wheel :表示的是滑鼠滾輪捲動,捲動一次就觸發一次，滑到底依舊可以觸發
        -->
        <ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
            <li style="height: 600px;"></li>
        </ul>
          <!-- 7. 如果想要使用多個修飾符可以使用鏈式形式 -->
          <!-- 需要即想要阻止冒泡，也想要禁止預設行為 -->
        <div @click = "stop" class="div1">
            <a @click.stop.prevent = "stop" href="https://www.baidu.com">點選我進入</a>
        </div>
    </div>

1.2.1 事件修飾符程式碼解析

html程式碼

<body>
    <div id="root">
        <!-- 1. prevent : 阻止預設行為 -->
        <a href="https://www.bilibili.com/" @click.prevent = "prevent">點選我進入b站</a>
        <hr>
        <!-- 2. stop : 禁止冒泡 -->
        <div @click = "stop" class="div1">
            <button @click.stop = "stop">點選我觸發事件</button>
        </div>
        <hr>
        <!-- 3. once : 事件只觸發一次 -->
        <button @click.once = "once">我只能觸發一次哦</button>
        <hr>
        <!-- 4. capture : 使用事件捕獲模式 -->
        <div class="box1" @click.capture = "capture(1)">
            div1
            <div class="box2" @click = "capture(2)">
                div2
            </div>
        </div>
        <hr>
        <!-- 5. self : 只有even.target所指向的操作元素才能觸發事件 
                相當於要滿足兩個條件
                    - 1. event.target必須指向self所修飾的元素
                    - 2. 觸發的也必須是這個元素
                    從某種意義上相當於禁止了冒泡，因為冒泡雖然觸發上面事件
                    但是event.target所指向的並非是這個元素
        -->
        <div class="box3" @click.self = "self">
            <button @click = "self">點選我</button>
        </div>
        <hr>
        <!-- 6. passive : 讓事件的預設行為立即執行 
            scroll:表示的是卷軸進行卷動，卷軸改變就觸發，並且滑到底就不能繼續觸發
            wheel :表示的是滑鼠滾輪捲動,捲動一次就觸發一次，滑到底依舊可以觸發
        -->
        <ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
            <li style="height: 600px;"></li>
        </ul>
          <!-- 7. 如果想要使用多個修飾符可以使用鏈式形式 -->
          <!-- 需要即想要阻止冒泡，也想要禁止預設行為 -->
        <div @click = "stop" class="div1">
            <a @click.stop.prevent = "stop" href="https://www.baidu.com">點選我進入</a>
        </div>
    </div>

js程式碼

 <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
            },
            methods:{
                prevent(){
                    alert("禁止預設行為");
                },
                stop(){
                    alert("禁止冒泡")
                },
                once(){
                    alert("只能觸發一次")
                },
                capture(x){
                    alert("現在是捕獲模式  "+x)
                },
                self()
                {
                    alert("self")
                },
                passive(){
                    for (let index = 0; index < 1000; index++) {
                        console.log("1")
                    }
                }
            }
        })
    </script>
</body>

1.3 鍵盤事件

常用的按鍵別名：	
			1.正常使用
      例如： @keyup.enter = "xxx"
 						- 回車   enter
            - 刪除   delete
            - 退出   esc
            - 空格   space
            - 上     up
            - 下     down
            - 左     left
            - 右     right
       2. 特別的按鍵
       			系統修飾鍵 :
            - ctrl,shift,alt,meta(就是window鍵)
            - 換行   tab(必須配合keydown去使用)
            - 配合keyup使用，當按下修飾鍵的時候在按下其他的鍵，然後在鬆開其他鍵事件才可以被觸發
            - 配合keydown使用，就直接觸發事件
       3.如果想要繫結其他按鍵，可以使用按鍵原始本身的key值（名字）去繫結
       4.可以自定義去設定按鍵別名，Vue.config.keyCodes.自定義鍵名 = 鍵值

具體案例

 <div id="root">
        <h1>歡迎學習{{name}}</h1>
        <input type="text" @keyup="keyboard">
        <br><br>
        <input type="text" @keyup.huiche="keyboard">
        <br><br>
        <input type="text" @keyup.ctrl.y="keyboard">
    </div>
    <script>
        Vue.config.productionTip = false
        Vue.config.keyCodes.huiche = 13  //定義了一個別名
        var vm = new Vue({
            el: '#root',
            data: {
                name: "Vue"
            },
            methods:
            {
                keyboard(event){
                    // console.log(event.keyCode);   按鍵編碼
                    // console.log(event.key);      按鍵的名字
                    console.log(event.target.value);
                }
            }
        })
    </script>

1.4 計算屬性（computed）

1.在頁面中的使用方法：=={{方法名}}==來顯示計算結果

2.定義：要使用的屬性/變數不存在，需要通過已有的屬性計算出來的

3.原理：底層是藉助了Object.defineProperty方法所提供的getter和setter

4.get函數執行的時機：

（1）初次讀取的時候會執行一次

（2）當所依賴的資料發生改變時就會再次被呼叫

5.相比於methods的優勢，內部是有快取機制（複用），效率會更高，偵錯會更方便

6.如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算時依賴的資料發生改變

7.需要注意的一個特殊點：以下面例子舉例：get函數中return返回值的會作為fullname的值進行返回，在控制檯可以看到是這樣的形式呈現fullname：xxx。

8.computed中的this指向是vm

9.簡寫形式: 基本要求就是在不使用set的情況下才可以簡寫注意在呼叫的時候不要寫成fullname()

<div id="root">
        姓: <input type="text" v-model="firstname">
        <br><br>
        名: <input type="text" v-model="lastname">
        <!-- 第一種寫法 使用插值語法 -->
        <!-- <h3>全名: {{firstname.slice(0,3)}} - {{lastname}}</h3> -->
        <!-- 第二種寫法 使用methods -->
        <!-- <h3>全名: {{fullname()}}</h3> -->
        <!-- 第三種寫法 使用computed（計算屬性） -->
        <h3>全名:{{fullname}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: { //屬性
                firstname: "張",
                lastname: "三",
            },
            // methods:
            // {
            //     fullname() {
            //         // 這裡的this指向是vm
            //         return this.firstname.slice(0,3) + "-" + this.lastname
            //     }
            // }
            computed: {
                fullname: {
             /* 
               1. Vue已經進行設定過了將this指向vm
               2. 當用人去讀取fullname時，get就會被呼叫，但是get只被執行一次因為Vue做														了一個事，就是快取，當執行過一次後，後面資料再去讀取會走快取這條路。
              3. return 的返回值會作為fullname的值，將fullname也拋到vm
              	（fullname:"張-三"）           
            */
                    get() {
                        return this.firstname + "-" + this.lastname
                    },
                    set(value) {                  
                        // 當fullname被修改時，set才會被呼叫
                        var arr = value.split("-") //按照指定字串進行拆分成陣列
                        this.firstname = arr[0]
                        this.lastname = arr[1]
                    }
                    /* 
                        簡寫形式: 基本要求就是在不使用set的情況下才可以簡寫
                        注意在呼叫的時候不要寫成fullname(),這個很特殊
                        computed:{
                            fullname(){  //相當於fullname：function(){}
                                 return this.firstname + "-" + this.lastname
                            }
                        }
                    */
                }
            }
        })
    </script>

1.5 監視屬性（watch）

1.當所監視的屬性發生變化時，回撥函數自動呼叫，進行相關的操作

2.監視屬性必須要存在，才能進行監視

3.監視屬性的兩種寫法：

（1）在new Vue中設定watch

（2）通過vm.$watch進行監視

4.watch裡handler函數this的指向是vm

<div id="root">
        <h1>今天天氣真{{weather}}</h1>
        <button @click="change">切換天氣</button>
         <h3>a的值是: {{a}}</h3>
        <!-- 在這裡面可以寫簡單的程式碼 -->
        <button @click = "a++">點選我讓a+1</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                flag: true
            },
            computed: {
                weather() {
                    return this.flag ? "涼快" : "炎熱"
                }
            },
            methods: {
                change() {
                    return this.flag = !this.flag
                }
            },
            watch:{  
                flag:{
                  // 第一個參數列示：修改後的值，第二個參數列示修改前的值
                   handler(newValue,oldValue){
                    console.log("flag被修改了");
                   },
                   immediate:true, //在一上來就執行一次
                  	deep:true  //表示深層次監視
               }
            }
        })
        vm.$watch("weather",{
            immediate:true,
            handler(newValue,oldValue){
                console.log("weather被修改了")
            }
        })

1.5.1 watch和computed的區別

watch和computed的區別是：

1.watch能夠完成的功能，computed不一定可以完成，但是computed可以完成的，watch也可以完成

2.computed是依靠return的返回值（getter），所以它不能夠完成非同步的任務,而watch可以

3.watch是靠我們自己寫程式碼進行修改

4.在學Vue當中有兩個很重要的原則：

所有被Vue管理的函數，最好寫成普通的函數，因為這樣this的指向才是vue或者元件的範例化物件
所有不被Vue管理的函數，最好寫成箭頭函數（Ajax的回撥函數，定時器的回撥函數，Promise的回撥函數），因為這樣this的指向才是vue或者元件的範例化物件

 <div id="root">
        <!-- 用watch寫一遍姓名的案例 -->
        姓: <input type="text" v-model="firstname">
        <br><br>
        名: <input type="text" v-model="lastname">
        <h2>全名: {{fullname}}</h2>
    </div>
    <script >
        // 需求：想要1s過後在顯示全名
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                firstname: "張",
                lastname: "三",
                fullname: "張 - 三"
            },
            watch: {
                firstname: {
                    handler(newval) {
                        console.log(this); //vm
                        /* 
                            這裡使用箭頭函數的目的就是為了讓this指向vue
                            此時沒有this所以他就向外面找，外面handler的this
                            指向是vm所以定時器的this指向也是vm
                         */
                       setTimeout(() => { //這裡如果使用普通函數this就指向window
                        console.log(this);  //vm
                        this.fullname = newval + " - " + this.lastname
                       }, 1000);
                    }
                },
                lastname: {
                    handler(newval) {
                        setTimeout(() => {
                        this.fullname = this.firstname + " - " + newval
                        }, 1000);
                    }
                }
            }
        })
    </script>