vue2+vue3学习笔记
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中,`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用,而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。但是,如果只是改变数据的值,而没有在页面上渲染该值,那么 `updated` 方法不会被触发。 data 函数式和对象式的区别 在 Vue 中,`data` 可以是函数式也可以是对象式。如果是函数式,修改 x1 中的数据,x2 中的数据不会跟着变。如果是对象式,修改 x1 中的数据,x2 中的数据会跟着变。 Vue.extend 创建组件 每次调用 `Vue.extend` 创建组件都会返回新的 Vue 组件,即使是同一组件使用标签创建两次也是如此。 ref 任何标签都可以添加 `ref` 属性,以便在后续操作中可以快速获取该标签。 props Props 是组件间传递数据的一种方式。可以实现组件复用,实现同一组件展示不同的数据。Props 接收到的数据会出现在 `vc` 上,不会出现在 `._data` 上。在 script 标签里可以使用 `this.变量名` 进行引用,可以在函数等修改 props 接收数据的值,但是控制台会警告,建议按照以下方式处理。 scope Scope 的原理是为容器和样式添加标签,根据标签对应样式。 组件间通信 组件间通信有多种方式,包括父对子传数据、子对父传递数据、任意组件之间传递数据等。父对子传数据可以使用 props,子对父传递数据可以使用自定义事件。任意组件之间传递数据可以使用全局事件总线或消息订阅与发布。 插槽 插槽是一种组件的特殊形式,父组件将自己的结构传给子组件,然后在子组件中规定的位置里插入。作用域插槽子组件可以给父组件传递数据,必须采用 template 结构接收,用“scope 或者slot-scope 接收”。 路由传参 路由传参可以使用 Query 传参或者 Params 参数。Query 传参可以使用 `to` 的字符串写法或对象写法。Params 参数可以使用 `to` 的字符串写法,需要在 `index.js` 文件里接收。 计算属性 计算属性和监测属性的区别是,计算属性是根据依赖的数据动态计算的,而监测属性是根据依赖的数据监测的变化。计算属性和监测属性可以实现列表过滤。 v-model v-model 是一种修饰符,用于收集数据。可以在表单类或输入类上使用。 Vue 实例与组件实例 Vue 实例和组件实例是不同的概念。Vue 实例是指整个 Vue 应用程序的实例,而组件实例是指组件的实例。 内置指令与自定义指令 Vue 提供了多种内置指令,如 `v-bind`、`v-model` 等。也可以自定义指令来满足特定的需求。 minin minin 是一个小型的 Vue 项目,用于快速构建 Vue 应用程序。 todolist 编辑功能 todolist 编辑功能可以使用 `@blur` 获取到焦点时,里面的业务逻辑。 Vue3 的 watch Vue3 的 watch 是一种监测数据变化的方式,可以实时监测数据的变化。 Vue 的特点 Vue 的特点是声明式的,即可以使用模板语法来描述用户界面。Vue 也提供了很多实用的功能,如路由、状态管理等。 Vue 的模板语法 Vue 的模板语法包括了很多种,如 `v-bind`、`v-model` 等。`v-bind` 用于动态绑定数据,而 `v-model` 用于收集数据。 el 与 data 的两种写法 `el` 和 `data` 都有两种写法。`el` 可以使用字符串或对象来描述容器,而 `data` 可以使用函数式或对象式来描述数据。 MVVM 模型 MVVM 模型是 Vue 的核心模型,即Model-View-ViewModel。Model 负责处理数据,View 负责描述用户界面,而 ViewModel 负责连接 Model 和 View。 object.defineProperty `object.defineProperty` 是一个 JavaScript 方法,用于定义对象的属性。可以使用该方法来添加或修改对象的属性。 本文总结了 Vue2+Vue3 的多种知识点,包括生命周期钩子函数、数据绑定、组件间通信、路由传参、计算属性、v-model 等。
剩余280页未读,继续阅读
- 粉丝: 0
- 资源: 14
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- jdk23 甲骨文官方安装包
- 【java毕业设计】高校学生求职就业平台源码(springboot+vue+mysql+说明文档).zip
- Python基础语法详解及面向对象编程介绍
- 【java毕业设计】高校学术交流平台源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】高校大学生竞赛项目管理系统源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】饮食营养管理信息系统源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】食品商城系统视频源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】零食批发商仓库管理系统源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】雅妮电影票购买系统源码(springboot+vue+mysql+说明文档).zip
- 实验报告4-资料.rar