Vue3学习（六）

取反，按键处理事件，鼠标左中右事件，form阻止提交，v-on，lazy，number，trim

<template>
    <!-- .delete只在删除键上有效，还有很多，如：enter，esc，等等 -->
    <!-- 还可以.once指的就是点击一次有效，后面无效 -->
    <!-- 还可以指定两个键来触发事件 如.alt.s还可以加很多... -->
    <!-- <input type="text" @keyup.delete="keyEvent"></input> -->
    按键处理事件：<input type="text" @keyup="keyEvent">
    <h3>key：{{key}}</h3>
    <h3>code：{{code}}</h3>
    <h3>keyCode：{{keyCode}}</h3>

    <hr />
    <!--  @click.prevent="阻止默认事件触发" -->
    <button @click.right.prevent="ClickEvent">右键触发</button>
    <button @mousedown.middle="ClickEvent">中键触发</button>
    <button @mouseup.left="ClickEvent">左键触发</button>
    <!-- <button @click="sleep">sleep</button> -->

    <hr />
    <!-- wheel滚轮触发 -->
    <!-- scroll滚动触发 -->
    <div id="box" @scroll="eventMethod">
        <ul>
            <li>第一页</li>
            <li>第二页</li>
            <li>第三页</li>
            <li>第四页</li>
            <li>第五页</li>
            <li>第六页</li>
        </ul>
    </div>


    <hr />
    <!-- @submit.prevent不会触发form提交 -->
    <form accept="www.baidu.com" method="get" @submit.prevent>
        <input name="inp" />
        <button @click="eventMethod">@submit.prevent提交不跳转</button>
        <!-- type:button 也不会触发form提交 -->
        <button @click="eventMethod" type="button">type:button提交不跳转</button>
    </form>

    <hr />
    <!-- v-on可以以数组的方式绑定事件 -->
    <input type="text" v-on="{mouseup:eventMethod,mousedown:eventMethod}">

    <hr />
    <!-- .lazy鼠标光标移开后触发 -->
    <!-- .number把字符串转成数字类型 -->
    <!-- .trim移除输入内容两端的空格 -->
    <input type="text" v-model.lazy="msg" />
    <select v-model="msg" style="width: 173px;">
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
        <option value="green">绿色</option>
    </select>
    <textarea v-model="msg"></textarea>
    <h2>{{msg}}</h2>

    <hr />
    <input type="text" v-model="msg2">
    初次渲染不更新：<h3 v-once>{{msg2}}</h3>
    双向绑定：<h3>{{msg2}}</h3>

    <hr />
    valueA:<input v-model="valueA" />
    msg:<input v-model="msg3" />
    <!-- v-memo指的是valueA发送改变后，才会渲染里面的数据 -->
    <!-- v-memo="[]"找不到渲染的条件，所以只渲染一次 -->
    <div v-memo="[valueA]">
        <h3>msg:{{msg3}} {{show()}}</h3>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
    export default({
        setup(){
            let msg=ref("");
            let msg2=ref("");
            let msg3=ref("Null");
            let valueA=ref("");
            let key=ref("");
            let code=ref("");
            let keyCode=ref("");
            function keyEvent(e:any){
                key.value=e.key;
                code.value=e.code;
                keyCode.value=e.keyCode;
                console.log(e.key,e.code,e.keyCode)
            }
            function ClickEvent(e:any){
                console.log("您点击了：",e)
                console.log(["左","中","右"][e.button]+"")
            }
            function eventMethod(e:any){
                console.log(e);
            }
            function show(){
                console.log("v-memo改变，渲染成功")
            }
            // function sleep(s:any){
            //     let time=new Date().getTime();
            //     while (new Date().getTime()<=time+s) 
            // }
            // for( var i=0;i<10;i++){
            //     console.log(i)
            //     sleep(2000)
            // }
            return {keyEvent,key,code,keyCode,ClickEvent,eventMethod,msg,msg2,msg3,valueA,show}
        }
    })
</script>

<style>
    hr{
        margin-bottom: 50px;
    }
    #box{
        width: 400px;
        height: 300px;
        overflow: auto;
        border: 1px red solid;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li{
        background: lightcyan;
        height: 200px;
    }
</style>