vue学习2

最新推荐文章于 2022-05-07 16:35:07 发布

aneyal

最新推荐文章于 2022-05-07 16:35:07 发布

阅读量548

点赞数 1

分类专栏：前端学习文章标签： javascript 学习前端 vue

本文链接：https://blog.csdn.net/aneyal/article/details/124189395

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

事件修饰符

事件修饰符用于设置事件的一些模式，使用方法：v-on:事件名.事件修饰符。例如：@click.prevent

1.prevent:阻止默认事件（常用）
2,stop:阻止事件冒泡（常用）
3.once:事件只触发一次（常用）
4.capture:使用事件的捕获模式，加在父级元素上
5.self:只有event.target是当前操作的元素时是才触发事件
6,passive:事件的默认行为立即执行，无需等待事件回调执行完毕

可以同时使用多个事件修饰符，例如：@click.prevent.stop

键盘事件

可以在键盘事件（keyup、keydown）之后添加修饰符（按键别名），进而在键盘按下某一案件时事件才触发。修饰符可以同时使用多个，例如@keyup.ctrl.y表示同时按下ctrl和y才能触发事件

常用按键名：

        回车=>enter
        删除=>delete(捕获“删除”和“退格”键)
        退出=esc
        空格=>space
        换行=>tab(特殊，要配合keydown使用）
        上=>up
        下=>down
        左=>left
        右=>right

对于Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）。例如，capslock为caps-lock

系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2)配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名（不推荐）

案例：姓名案例（使用双向绑定实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="./js/vue.js"></script>
    <style>
        .root{
            width: 300px;
            height: 130px;
            border: 1px solid black;
        }
        .root div{
            width: 200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="root">
        <!-- 使用双向绑定 -->
        <div>姓：<input type="text" v-model:value="firstName"></div>
        <div>名：<input type="text" v-model:value="lastName"></div>
        //姓只取三位
        <div class="name">全名：{{firstName.slice(0,3)}}{{lastName}}</div>
    </div>
    <!-- 输入姓和名，显示姓名 -->
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'.root',
            data:{
                firstName:"张",
                lastName:"三",
            }
        })
    </script>
    
</body>
</html>

案例：姓名案例（使用methods实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="./js/vue.js"></script>
    <style>
        .root{
            width: 300px;
            height: 130px;
            border: 1px solid black;
        }
        .root div{
            width: 200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="root">
        <!-- 使用methods -->
        <div>姓：<input type="text" v-model:value="firstName"></div>
        <div>名：<input type="text" v-model:value="lastName"></div>
        <!-- 调用Fname函数 -->
        <div class="name">全名：{{Fname()}}</div>
    </div>
    <!-- 输入姓和名，显示姓名 -->
    <script>
        Vue.config.productionTip=false
        let vm=new Vue({
            el:'.root',
            data:{
                firstName:"张",
                lastName:"三",
            },
            methods:{
                Fname(){
                    return this.firstName+this.lastName
                }
            }
        })
    </script>
</body>
</html>

计算属性

计算属性就是将原来的属性计算得到的属性

计算属性使用computed表示，注意，表示计算属性时，计算过程要用对象表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="./js/vue.js"></script>
    <style>
        .root{
            width: 300px;
            height: 130px;
            border: 1px solid black;
        }
        .root div{
            width: 200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="root">
        <div>姓：<input type="text" v-model:value="firstName"></div>
        <div>名：<input type="text" v-model:value="lastName"></div>
        <div class="name">全名：{{fullName}}</div>
    </div>
    <!-- 输入姓和名，显示姓名 -->
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'.root',
            data:{
                firstName:"张",
                lastName:"三",
            },
            computed:{
                fullName:{
                    // 只要读取fullName属性，调用get，并且其返回值为fullName的值
                    get(){
                       return this.firstName+this.lastName
                    }
                }
            }
        })
    </script>
    
</body>
</html>

计算属性里面的get方法会在两个地方被调用：初次读取fullName时以及所依赖的数据发生改变时

计算属性中的set()方法不一定要写，其在计算属性被设置时调用。

简写

确定计算属性只读不改，可以使用简写。

简写就是将计算属性写为一个函数，就是get函数的内容

例：（上一个代码示例中计算属性的简写）

 fullName(){
    return this.firstName+this.lastName
 }

aneyal

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习2

事件修饰符、键盘事件、计算属性
复制链接

扫一扫

专栏目录