Vue 学习总结笔记 (二)

最新推荐文章于 2024-04-04 11:02:50 发布

m0_67393828

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量91

点赞数

分类专栏：前端 html 文章标签：前端小程序 vue.js

本文链接：https://blog.csdn.net/m0_67393828/article/details/123266594

版权

文章目录

1. Vue的事件修饰符
2. js的事件对象 event
3. Vue 键盘事件
4. 差值语法中调用函数名的效果
5. Vue的计算属性
6. Vue的监视属性
7. watch监视属性和computed 计算属性对比

1. Vue的事件修饰符

1.1 Vue 的六种事件修饰符

在Vue中，事件修饰符有六种：

prevent: 阻止默认事件(常用)。
stop:阻止事件冒泡(常用)。
once：事件只触发一次(常用)。
capture：使用事件的捕获模式。
self：只有event.target是当前操作的元素时，才触发事件。
passive：事件的默认行为立刻执行，无序等待事件回调执行完毕。

事件修饰符，母庸质疑就是用来修饰Vue事件的！

1.2 Vue的 prevent事件修饰符

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <!--使用prevent事件修饰符：阻止默认事件-->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>
<script>

    Vue.config.productionTip = false;

    const vm = new Vue({
        el:"#root",
        data:{
            name:"北京大学"
        },
        methods:{
            showInfo(event){
                //通过event事件对象来，阻止标签的默认行为
                //event.preventDefault();
                alert("同学你好");
            }
        }
    })

</script>
</body>
</html>

1.3 Vue的 stop事件修饰符

使用vue的stop事件修饰符，来阻止事件冒泡。

<!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>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <!--使用stop事件修饰符：阻止事件冒泡-->
        <div class="demo1" @click="showInfo">
            <!--阻止了点击div的点击事件-->
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
    </div>
<script>

    Vue.config.productionTip = false;

    const vm = new Vue({
        el:"#root",
        data:{
            name:"北京大学"
        },
        methods:{
            showInfo(event){
                alert("同学你好");
            }
        }
    })

</script>
</body>
</html>

1.4 Vue的 once事件修饰符

Vue的once事件修饰符：事件只触发一次(常用)。

<!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>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <!--使用once事件修饰符：事件只触发一次！-->
        <button @click.once="showInfo">按钮</button>
    </div>
<script>

    Vue.config.productionTip = false;

    const vm = new Vue({
        el:"#root",
        data:{
            name:"北京大学"
        },
        methods:{
            showInfo(event){
                alert("同学你好");
            }
        }
    })

</script>
</body>
</html>

1.5 Vue的 capture事件修饰符

事件修饰符capture：使用事件的捕获模式。

这里涉及到两个js的内容：事件捕获和事件冒泡。

在事件冒泡阶段，才会处理我们的一些事件对应的函数！
在这里插入图片描述

<!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">

最低0.47元/天解锁文章

m0_67393828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习总结笔记 (二)

文章目录1. Vue的事件修饰符1.1 Vue 的六种事件修饰符1.2 Vue的 prevent事件修饰符1.3 Vue的 stop事件修饰符1.4 Vue的 once事件修饰符1.5 Vue的 capture事件修饰符1.6 Vue的 self事件修饰符1.7 Vue的 passive 事件修饰符2. js的事件对象 event3. Vue 键盘事件4. 差值语法中调用函数名的效果5. Vue的计算属性6. Vue的监视属性6.1 监视属性的使用6.2 深
复制链接

扫一扫