【前端Vue】——课堂笔记（二）

💻博主现有专栏：

                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组件---->父组件