【前端Vue】——课堂笔记(二)

devtools/2024/10/15 5:46:55/

💻博主现有专栏:

                C51单片机(STC89C516),c语言,c++,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux,基于HTML5的网页设计及应用,Rust(官方文档重点总结),jQuery,前端vue.js,Javaweb开发,设计模式、Python机器学习等
🥏主页链接:

                Y小夜-CSDN博客

目录

🎯列表渲染指令

🎯事件对象及修饰符

🎯选项式API和组合式API

🎯生命周期函数

🎯全局组件和局部组件的注册

🎯父组件向子组件传递数据

🎯子组件向父组件传送数据

🎯封装轮播图组件

🎯todo待办事项案例


🎯列表渲染指令

  作用:把数组中的数据或者对象的属性通过循环的形式渲染到页面中
  v-for
  面试题:使用v-for进行列表渲染时,为什么要使用v-bind绑定key属性?

🎯事件对象及修饰符

  直接在事件处理方法中当参数
  vue中提供了一个事件对象$event

🎯选项式API和组合式API

  实际上代表的是代码的两种书写风格
   选项式API使用时注意事项:
  (1)选项式API中页面渲染需要的数据放到data函数中的return部分
  (2)选项式API中在script标签中写代码时,如果涉及到操作定义好的变量的值,前面要加this,如果在模板中不要加this;
  (3)选项式API中计算属性要放到computed属性里去定义;
  (4)选项式API中侦听器要放到watch属性里去定义,并且定义的函数名要和要侦听的变量名同名;
  (5)选项式API中的数据本身就是响应式的数据;
   组合式API使用时注意事项:
  (1)组合式API中页面渲染需要的数据放到setup函数中的return部分;
  (2)组合式API中需要使用到的vue中提供的函数或方法必须先使用import导入,
  (3)组合式API中计算属性是调用computed函数的返回值,逻辑代码要放到computed函数的参数中,该参数是个回调函数;
  (4)组合式API中侦听器是通过使用watch函数的形式来使用,第一个参数就是要侦听的变量,第二个参数是个回调函数,该回调函数的第1个参数是变量的当前值,第2个参数时改变前的值;
  (5)组合式API中的数据必须使用vue提供的数据响应化方法进行处理,使用ref方法进行响应化处理的数据在script标签中必须加.value属性进行读写操作,如果在模板中使用不要加value属性;

🎯生命周期函数

 注意:组合式API和选项式API中的生命周期函数写法不同
  尤其是组合式API,如果想让页面一打开就要执行一些操作,经常把执行的代码放到onMounted生命周期函数的回调函数参数内

🎯全局组件和局部组件的注册

组件应用三部曲:导入、注册、使用
 说明:
 (1)全局组件注册在main.js中,通过调用vue实例的component()方法来实现,注册全局组件的目的是为提高组件使用的复用性,使用在页面多个地方要渲染同一个组件的场景;
 (2)局部组件注册在要使用使用者组件内,在语法糖写法形式下,通过import导入后就意味着已经注册,直接当标签来用,事实上局部组件经常当作一个组件的私有子组件使用;
 (3)不管是全局组件还是局部组件,注册时建议起名为大驼峰命名形式,使用是既可以使用大驼峰形式,也可以使用-形式;

🎯父组件向子组件传递数据

  思考:为什么要传递数据?要提交子组件的复用性,尽可能让子组件内模版要渲染的数据不要具体化,这就需要在使用子组件的父组件中定义数据,当使用组件时将数据传递到子组件内部进行渲染。
  方法:通过自定义属性的形式传递数据
  注意:大多数的应用场景下,父组件向子组件传送数据时,会将自定义属性绑定在一个变量上。

🎯子组件向父组件传送数据

  方法:在父组件中使用子组件时,通过为子组件绑定自定义事件的形式实现将子组件中的数据传递给父组件来使用。
  注意:
  (1)自定义事件需要在子组件内使用emmit方法触发;
  (2)自定义事件触发后执行的事件处理函数的形参就可以拿到子组件传送给父组件的数据。

   提醒:实际应用中,父组件中使用一个子组件时经常要处理相互传递数据的情况

🎯封装轮播图组件

   关注:
  (1)父组件向子组件传递数据;
  (2)如果子组件内部的script代码中还需要访问定义的自定义属性,需要用到defineProps()方法调用时的返回值;
  (3)父组件向子组件传递数据,除了在父组件中使用子组件时添加自定义属性的形式进行传递,还可以使用跨级组件的依赖注入方法。

🎯todo待办事项案例

   说明:
   (1)ToDoHeader组件内在输入框中输入的数据需要添加到父组件中定义的数组中
       ToDoHeader组件----> 父组件
   (2)ToDoMain组件内渲染的数据依赖于父组件中的数组数据
       父组件---->ToDoMain组件
       ToDoMain组件内点击删除按钮后要实现对父组件中的数组数据的删除 
       ToDoMain组件---->父组件
   (3)ToDoFooter组件内渲染的未完成任务条数的数据以及点击按钮时要修改的状态值依赖于父组件中的数据
        父组件---->ToDoFooter组件
       ToDoFooter组件内点击按钮时要修改父组件中的代表状态的数据
        ToDoFooter组件---->父组件


http://www.ppmy.cn/devtools/44913.html

相关文章

如何从异步调用中返回响应

想象一下,你打电话给朋友并让他帮你查一些资料。虽然这可能需要一段时间,但你会在电话里等待,直到朋友给你需要的答案。这就是同步调用的行为: function findItem() {var item;while (item_not_found) {// 查找}return item; }var item = findItem(); // 使用 item doSome…

JavaScript base64 与 File 之间的互转

JavaScript base64 与 File 之间的互转 一、base64 > File 在 JavaScript 中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。 方法一、base64 直接转换为 File 对象: 首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64…

react antd table表格如何获取当前行id

组件库上都有详细的介绍,有自带的一些属性!

Redis 主从复制

前言 在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他服务器,满⾜故障恢复和负载均衡等需求。Redis 也是如此,它为我们提供了复制的功能,实现了相同数据的多个 Redis 副本。复制功能是⾼可⽤ Redis 的基础&am…

家政预约小程序10公众号集成

目录 1 使用测试号3 工作流配置4 配置关注事件脚本5 注册开放平台6 获取公众号access_token6 实现关注业务逻辑总结 我们本次实战项目构建的相当于一个预约平台,既有家政企业,也有家政服务人员还有用户。不同的人员需要收到不同的消息,比如用…

Kubernetes 之 ReplicaSet

Kubernetes 之 ReplicaSet ReplicaSet 定义 ReplicaSet 是 Kubernetes 中的一种副本控制器,其主要作用是控制其管理的 Pod 的预设副本数量。它会持续监听这些 Pod 的运行状态,在Pod发生故障时执行重启策略,当 Pod 数量减少时会重新启动新的…

牛客NC236 最大差值【simple 动态规划 Java/Go/PHP】

题目 题目链接: https://www.nowcoder.com/practice/a01abbdc52ba4d5f8777fb5dae91b204 思路 不难看出该题可以使用动态规划的方式解题。 在循环数组的过程中,记录截止到当前位置-1的最小值, 然后用当前的值去计算最大的差值。Java代码 im…

16:00面试,16:08就出来了,问的问题有点变态。。。

从小厂出来,没想到在另一家公司又寄了。 到这家公司开始上班,加班是每天必不可少的,看在钱给的比较多的份上,就不太计较了。没想到8月一纸通知,所有人不准加班,加班费不仅没有了,薪资还要降40%…