事件及计算属性及生命周期的了解与学习

啵啵鱼爱吃鱼

于 2024-09-15 15:47:21 发布

阅读量462

点赞数 9

文章标签： android

本文链接：https://blog.csdn.net/ysbwjby/article/details/142284760

版权

v-on 绑定事件

#语法
v-on:事件名="事件函数/代码块"
#简写v-on 为 @
@事件名="事件函数/代码块"


v-on:事件名="事件处理"

常用事件名:

事件处理器的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。 js代码
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。函数名

内联事件处理器

方法事件处理器

调用methods中定义的函数, 可以是有参, 无参

无参:

触发一个事件, 浏览器为该事件,创建一个事件对象, Event

得到事件对象 Event

第一种写法: 函数

会默认将原生事件event参数传递进去

第二种写法: 函数() 不会默认把事件对象传递

第二: 有参

不需要事件对象

需要事件对象, 使用$event手动传递事件对象

事件修饰符

事件冒泡: 事件传播, 由子元素传递到父元素

实际开发中, 可能会阻止事件冒泡

原生元素js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
</head>
<body>
    <div onclick="father()" style="width: 300px; height: 300px; background-color: red;">
        <div onclick="son(event)" style="width: 200px; height: 200px; background-color: green;"></div>
    </div>

    <a href="http://www.baidu.com" onclick="ck(event)">百度</a>

    <script>
         function father(){
            console.log("1");
        }

        function son(e){
            console.log("2");
            e.stopPropagation(); //阻止事件冒泡
            
        }

        function ck(e){
            alert("点了一下");
            //阻止默认行为
            e.preventDefault();

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

事件修饰符:

.stop 表示阻止默认事件冒泡
.prevent 表示阻止默认行为
.self 表示事件只在该元素触发,
.capture表示使用事件捕获模式: 由外而内触发。
.once表示事件只会触发一次
.passive 主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验
.left 只当点击鼠标左键时触发。
.right 只当点击鼠标右键时触发。
.middle 只当点击鼠标中键时触发。

键盘事件的修饰符: 与键盘事件绑定

修饰符	描述
.enter	回车键
.tab	tab键
.delete	删除或者退格键
.esc	esc键
.space	空格键
.up	上方向键
.down	下方向键
.left	左方向键
.right	右方向键
.ctrl	ctrl键
.alt	alt键
.shift	shift键

v-pre

跳过该元素及其所有子元素的编译。

v-once

仅渲染元素和组件一次，并跳过之后的更新。

v-cloak

用于隐藏尚未完成编译的 DOM 模板。

配合style样式:

[v-cloak] {
         display: none;
    }

用户刷新页面,不会看到未编译的模板

计算属性

就是对Vue对象中的data中的属性进行再加工或者计算得到的属性,我们称为计算属性.在Vue中,我们使用computed来设置计算属性.

计算属性的get函数的执行:

第一次使用的时候调用
计算属性依赖的数据发生变化, 调用

计算属性的完整写法:

计算属性的简写:

如果计算属性只提供一个get函数, 可以简写:

简写:

综合案例

js的数组相关的函数:

生命周期面试

vue实例的从生到死的过程就是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期

vue生命周期阶段中定义一个函数, 这个函数是达到这个阶段,自动执行, 这些函数称为生命周期函数, 生命周期钩子函数

1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数

全部的生命周期函数

生命周期函数	执行时机	所属阶段	执行次数	应用场景
beforeCreate	在内存中开始创建组件之前	创建阶段	唯一一次	-
created	在内存中创建组件完毕后	创建阶段	唯一一次	发送ajax请求
beforeMounted	在把组件初次渲染到页面之前	创建阶段	唯一一次
mounted	组件初次渲染到页面之后	创建阶段	唯一一次	操作DOM
beforeUpdate	在组件被重新渲染之前	运行阶段	0次或多次
updated	在组件被重新渲染之后	运行阶段	0次或多次
beforeUnmount	在组件被销毁之前	销毁阶段	唯一一次
unmounted	在组件被销毁之后（页面和内存）	销毁阶段	唯一一次