Vue新手村（二）

最新推荐文章于 2024-08-11 21:02:19 发布

龙洋静

最新推荐文章于 2024-08-11 21:02:19 发布

阅读量1k

点赞数 25

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/LYJbao/article/details/135445687

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、计算属性

计算属性：

computed：vue官方提供一个计算属性
作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算
好处：在完成计算同时也会将计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次
使用：{{ }}，在里面填写方法名即可

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{count}}</h1>
        <h2>总数：{{test2}}</h2>
        <h2>总数：{{test2}}</h2>
        <h2>总数：{{test2}}</h2>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            count:1
        },
        methods:{
            test() {

            }
        },
        computed:{
            test2() {
                console.log("调用了computed方法")
                return 3*this.count
            }
        }
    })
</script>

重点代码:

效果：

2、事件修饰符

修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制~

2.1、stop事件修饰符

.stop：用来阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 对冒泡事件不处理 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
        <hr>
        <!-- 阻止事件冒泡了 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click.stop="child"></div>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            parent() {
                alert('parent')
            },
            child() {
                alert('child')
            }
        }
    })
</script>

主要代码：

效果：

当你点击第一个父div下的子div时，会连续有两个alert弹框，这就叫做冒泡
当你点击第二个父div下的子div时，只会有一个alert弹框，这就是阻止了冒泡

2.2、prevent事件修饰符

.prevent：用来阻止标签的默认行为

主要代码：

没有添加.prevent时，点击后，会有alert弹框，然后跳转至百度。当我们不想让他执行默认行为（跳转）时，就可以使用.prenvent来控制

2.3、self事件修饰符

.self：用来针对当前标签的事件触发——只触发自己标签上的特定动作，只关心自己标签上触发的事件，不监听事件冒泡

主要代码：

此时，我们点击子div，也不会触发父div的alert，因为添加了.self，他只关心自己标签上的事件

2.4、once事件修饰符

.once：一次作用——就是让指定事件只触发一次

主要代码：

不管是点击子div，冒泡触发的，还是点击父div自己触发的，一共只触发一次~

3、按键修饰符

作用：用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符

例如下面的例子【其他：.tab .delete .esc .space .up .down .left .right】

3.1、enter回车键

enter回车回车键修饰符，用来在触发回车按键之后触发的事件

主要代码：

如上述，我们enter后就会触发提交函数

好啦，我们先学到这里哦，下期继续

龙洋静

关注

25
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue新手村（二）

例如下面的例子【其他：.tab .delete .esc .space .up .down .left .right】此时，我们点击子div，也不会触发父div的alert，因为添加了.self，他只关心自己标签上的事件。.self：用来针对当前标签的事件触发——只触发自己标签上的特定动作，只关心自己标签上触发的事件，不监听事件冒泡。不管是点击子div，冒泡触发的，还是点击父div自己触发的，一共只触发一次~修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制~
复制链接

扫一扫