一、事件的處理

1、事件的基本使用：

1、使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名
2、事件的回調需要配置在methods對象中，最終會在vm上
3、methods中的配置的函數(shù)，不要用箭頭函數(shù)，否則this就不是vm了
4、methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm 或組件實例對象
5、@click='demo' 和 @click="demo($event)" 效果一致，但后者可以傳參

 <div id="root">
        <!-- View -->
        <h1>名字：{{name}}</h1>
        <button v-on:click="showInfo">點我提示信息(不傳參)</button>
        <button @click="showInfo1(66,$event)">點我提示信息1(傳參)</button>
</div>

<script>
  Vue.config.productionTip = false; //阻止vue在啟動時生成生產(chǎn)提示

    //創(chuàng)建Vue實例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            name: '劉建軍',  //Model
            address: '西安'
        },
        methods: {
            showInfo(event) {
                console.log(event.target.innerText);
                console.log(this);  //此處的this是vm
                // alert(111);
            },
        
            showInfo1(number,event) {
                // alert(2222);
                console.log(number,event);
            },

        }
    });

    console.log(vm);

</script>

2、事件的修飾符

Vue中的事件修飾符
1、prevent : 阻止默認事件（常用）
2、stop : 阻止事件冒泡（常用）
3、once : 事件只觸發(fā)一次（常用）
4、capture : 使用事件的捕獲模式
5、self : 只有event.target是當前操作的元素時才觸發(fā)事件
6、passive : 事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢

 <div id="root">
        <!-- View -->
        <h1>名字：{{name}}</h1>
        <!-- 阻止默認事件 -->
        <a  @click.prevent="showInfo">點我提示信息</a>

        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">點我提示信息</button>
        </div>

        <!-- 事件只觸發(fā)一次 -->
        <div class="demo1">
            <button @click.once="showInfo">點我提示信息</button>
        </div>

        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>


        <!-- 只有event.target是當前操作的元素時，才觸發(fā)事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">點我提示信息</button>
        </div>


        <!-- 
            事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢 
            @scroll
            @wheel.passive 移動端常用 做一些優(yōu)化
        -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
</div>
<script>

    Vue.config.productionTip = false; //阻止vue在啟動時生成生產(chǎn)提示

    //創(chuàng)建Vue實例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            name: '劉建軍',  //Model
            address: '西安'
        },
        methods: {
            showInfo(e) {
                alert(111)
                // console.log(e.target)
            },
            showMsg(msg) {
                console.log(msg);
            },
            
            demo() {
                console.log('@');
            },

        }
    });

    console.log(vm);

</script>

3、鍵盤事件

可以通過e.key 來查看鍵盤健名
console.log(e.key,e.keyCode);
1、Vue中常用的按鍵別名

回車 => enter
刪除 => delete (捕獲刪除和退格鍵)
退出 => esc
空格 => space
換行 => tab (特殊，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2、Vue未提供別名的按鍵，可以使用按鍵原始的key值來綁定，但注意要轉化為 caps-lock(短橫線命名)
3、系統(tǒng)修飾符（用法特殊）：ctrl、alt、shift、meta(win健)
!! 可以配合使用 .keyup.ctrl.y
(1)、配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)
(2)、配合keydown使用，正常觸發(fā)事件
4、也可以使用keyCode去指定具體的按鍵 (不推薦)
5、Vue.config.keyCodes.自定義鍵名 = 鍵碼。可以定制按鍵別名

 <div id="root">
        <h1>{{name}}你好啊</h1>
        <!-- 這是自己定義的一個鍵名(hiuche) -->
        <input @keyup.hiuche="showInfo" type="text" placeholder="按下回車提示輸入">
</div>
<script>

    Vue.config.productionTip = false; //阻止vue在啟動時生成生產(chǎn)提示

    //自己定義一個別名按鍵
    Vue.config.keyCodes.hiuche = 13;

    //創(chuàng)建Vue實例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            name: '劉建軍',  //Model
            address: '西安'
        },
        methods: {
            showInfo(e) {
                // if(e.keyCode != 13) return
                console.log(e.target.value)

                // 通過e.key 來查看鍵盤健名
                console.log(e.key,e.keyCode);
            },

        }
    });

    console.log(vm);

</script>

二、計算屬性和監(jiān)聽器

計算屬性：

1、定義：要用的屬性不存在，要通過已有的屬性計算得來的
2、原理：底層借助了Object.defineproperty方法提供的getter和setter
3、 get什么時候調用？
(1)、初次讀取 fullName時,會執(zhí)行一次(會有緩存，多次使用時，直接從緩存讀取數(shù)據(jù))
(2)、所依賴的數(shù)據(jù)發(fā)生變化時，會被再次調用
4、優(yōu)勢：與methods實現(xiàn)相比，內部有緩存機制(復用)，效率更高，調試方便
5、備注：
(1)、計算屬性最終會出現(xiàn)在vm上，直接讀取即可
(2)、如果計算屬性要被修改，那必須寫set函數(shù)去響應修改，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變
1、第一種
在methods中定義換算單位的方法
并將方法綁定到按鈕上
或將方法綁定到change事件上
方法只會在失去焦點時才觸發(fā)
或將方法綁定到input事件上
當你輸入的時候，方法就會觸發(fā)
2、第二種偵聽器 watch
$\color{red}{注意:}$ 如果data中 num 發(fā)生變化，就會自動觸發(fā)這個回調函數(shù)
偵聽器的本質就是回調函數(shù)
觀察和響應 Vue 實例上的數(shù)據(jù)變動
當利用雙向數(shù)據(jù)綁定改變data中的數(shù)據(jù) num2
當data中數(shù)據(jù)發(fā)生改變則觸發(fā)在偵聽器中設置的方法(回調函數(shù))
我們可以在這個回調函數(shù)中對數(shù)據(jù)進行修改或者使用
與第一種方式對比起來
不需要借助事件來觸發(fā)，寫法上更加簡單監(jiān)聽起來更同步
3、第三種計算屬性 computed
相當于是一個跟data 一樣的數(shù)據(jù)形式
不同的是data中的數(shù)據(jù) 是鍵值對的形式
而computed中的數(shù)據(jù)是函數(shù)的形式
所以computed可以在數(shù)據(jù)使用前對其進行設置或修改
正常的數(shù)據(jù)渲染
只不過渲染的數(shù)據(jù)是在 computed中設置的函數(shù)形式的數(shù)據(jù)
這個函數(shù)形式的數(shù)據(jù)可以直接進行計算或修改
所以從視覺效果上達到一個實時偵聽的效果
$\color{red}{注意:}$ 計算屬性中的函數(shù)，必須有返回值

$\color{orange}{區(qū)別:}$ 偵聽器和計算屬性的區(qū)別：

1、偵聽器是直接偵聽 data中的數(shù)據(jù)
2、如果綁定的數(shù)據(jù)發(fā)生變化自動觸發(fā)，偵聽器中所對應的回調函數(shù)
3、計算屬性是一個函數(shù)形式的數(shù)據(jù)
它可以對某個值在使用之前進行設置或修改
函數(shù)定義完畢后直接將函數(shù)名當做數(shù)據(jù)來使用就行
(使用方法跟 data中的數(shù)據(jù)一樣)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue事件處理

Vue事件處理

一、事件的處理

1、事件的基本使用：

2、事件的修飾符

3、鍵盤事件

二、計算屬性和監(jiān)聽器

計算屬性：

$\color{orange}{區(qū)別:}$ 偵聽器和計算屬性的區(qū)別：

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue事件處理

一、 事件的處理

1、事件的基本使用：

2、事件的修飾符

3、鍵盤事件

二、計算屬性和監(jiān)聽器

計算屬性：

偵聽器和計算屬性的區(qū)別 ：

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、事件的處理

$\color{orange}{區(qū)別:}$ 偵聽器和計算屬性的區(qū)別：