随笔分类 - Vue2
摘要：Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。 组件库举例 Vant: 专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移
阅读全文
摘要：在Vue中，mixins（混入）是一种用于分发Vue组件中可复用功能的灵活机制。它们允许你抽取组件中的共享功能，如数据、计算属性、方法、生命周期钩子等，并将其作为单独的模块复用到多个组件中。这种方式有助于保持代码的DRY（Don't Repeat Yourself）原则，提高可维护性和可读性。 基本
阅读全文
摘要：学而时用之，方能融会贯通！ 实例：商品列表 实现功能 要求表格组件支持动态数据渲染、自定义表头和主体。标签组件需要双击显示输入框并获得焦点，可以编辑标签信息。 思路 首先是表格组件，动态渲染需要使用组件通信-“父传子”；允许自定义可以使用具名插槽；而对于标签组件，可以使用v-if/else和自定义指
阅读全文
摘要：来个简单示例练练手吧。 实例：插槽实例 思路 在封装表格组件时，通常使用默认插槽和作用域插槽来处理固定的自定义结构。 代码 根组件（APP.vue） <template> <div> <MyTable :data="list1"> <!-- 使用插槽 --> <!-- 3.通过template #插
阅读全文
摘要：Vue 中的插槽（slot）是一种灵活的机制，用于在父组件中将内容传递到子组件的特定位置。它允许我们在子组件中定义可以在父组件中传递任意内容的“插槽”，从而实现更灵活的组件化。 在Vue中，插槽主要有以下几种类型： 默认插槽（Default Slot）： 这是最基础的插槽类型。在子组件模板中使用 <
阅读全文
摘要：通过上一节的学习，我们了解并掌握了组件通信的定义及一般使用。那么接下来，我们将之前练习过的案例使用组件化思想来实现一下吧。 实例：记事本（组件化） 实现功能 运用组件化思想，实现Vue学习：3.V标签综合3（https://blog.csdn.net/weixin_51416826/article/
阅读全文
摘要：组件通信就是指组件之间的数据传递。由于组件的数据是独立的，无法直接访问其他组件的数据，所以想要使用其他组件数据必须通过 组件通信！ 在Vue.js中，组件之间的通信可以通过多种方式实现，包括 props、事件、$emit / $on、Vuex 状态管理等。 要讲组件通信首先来说一下组件关系。 组件关
阅读全文
摘要：组件化开发 组件化开发是一种软件开发方法，它将应用程序拆分成独立的、可重用的模块，每个模块都被称为组件。这些组件可以独立开发、测试、维护和部署，从而提高了代码的可维护性、可扩展性和复用性。在前端开发中，Vue、React和Angular等现代JavaScript框架都采用了组件化的思想。 简单地说，
阅读全文
摘要：0基础如何进入IT行业？ 简介：对于没有任何相关背景知识的人来说，如何才能成功进入IT行业？是否有一些特定的方法或技巧可以帮助他们实现这一目标？ 方向一：学习路径 1.明确兴趣和目标：首先确定你对IT领域的兴趣和目标。IT行业非常广泛，包含了软件开发、网络管理、数据分析、人工智能等不同的领域。了解自
阅读全文
摘要：0基础如何进入IT行业？ 简介：对于没有任何相关背景知识的人来说，如何才能成功进入IT行业？是否有一些特定的方法或技巧可以帮助他们实现这一目标？ 方向一：学习路径 明确兴趣和目标：首先确定你对IT领域的兴趣和目标。IT行业非常广泛，包含了软件开发、网络管理、数据分析、人工智能等不同的领域。了解自己的
阅读全文
摘要：两个小例子，巩固一下生命周期钩子函数。 实例1：初始化渲染 实现功能： 在 Vue 实例数据为空的情况下，用户在一进入页面就向服务器发送请求获取数据，并在数据返回后进行动态渲染。 思路： 创建一个 Vue 实例，将数据初始化为空。 使用 Vue 的 created生命周期钩子函数，一进入页面便发送请
阅读全文
摘要：Vue.js框架为组件设计了一套完整的生命周期，涵盖了从创建到销毁的全过程。这些生命周期钩子函数（lifecycle hooks）允许开发者在特定的阶段执行自定义逻辑，以便更好地管理组件的状态和与其交互的DOM元素。Vue 的生命周期钩子函数可以分为三类：创建、更新和销毁，以下是Vue组件的核心生命
阅读全文
摘要：再来一节v标签综合... 实例：水果购物车 实现功能： 显示水果列表：展示可供选择的水果列表，包括名称、价格等信息。 修改水果数量：允许用户在购物车中增加或减少水果的数量。 删除水果：允许用户从购物车中移除不需要的水果。 选择水果进行结算：在用户点击或选择水果时，将其添加到购物车中。 全选或反选水果
阅读全文
摘要："watch" 监听器是一种在 Vue.js 中用于监视数据变化并执行相应操作的机制。它是 Vue 实例的一个选项，允许你监视指定的数据，并在数据变化时执行特定的逻辑。通常情况下，"watch" 监听器用于响应数据的变化，例如当数据发生变化时执行异步操作、触发其他方法或更新其他数据等。 简单写法：
阅读全文
摘要：通过前几节的认识和学习，我们掌握了常用v标签的用法，这一节再来巩固提高一下吧。 实例：成绩面板 实现功能： 主体由两大部分组成：表格+表单。这个表格可以显示多科成绩，并具有表头、删除以及底部统计功能。同时，在下方还有一个成绩输入表单，允许用户添加科目成绩，新添加的成绩会实时显示在表格中。 思路： 综
阅读全文
摘要：上一节了解的是计算属性的默认简写，只能读取，不能修改。 什么意思呢？很简单，我们知道计算属性是依赖数据动态计算一个值，那我可不可以直接this.计算属性 = xxx 来修改计算属性的结果呢？这其实是不行的！因为上一节中我们写的是计算属性的默认简写，只能构读取数据，如果要进行修改，必须写它的完整形式。
阅读全文
摘要：计算属性是 Vue.js 提供的一种特殊属性，用于在模板中动态计算和返回数据。计算属性使得在模板中使用动态计算的数据变得非常简洁和方便，同时又能保持响应式更新的特性，提高了代码的可读性和可维护性。 与方法（methods）的区别： 计算属性（Computed Properties）和方法（Metho
阅读全文
摘要：第一节算是对v-bind的粗略了解，仅仅是列举了v-bind的使用。这一节将更详细的了解v-bind的具体用法。 v-bind是 Vue.js 中常用的指令之一，用于动态地绑定属性或者表达式到 HTML 元素上。通过 v-bind，你可以将 Vue 实例的数据绑定到元素的属性上，实现数据的动态更新。
阅读全文
摘要：第一节算是对v-model的粗略了解，仅仅是将input的输入与Vue 实例的数据之间双向绑定。这一节将更详细的了解v-model在不同表单元素中的使用。 v-model实例：找对象 实现功能： 使用v-model实现快速获取或设置其他表单元素（单选框、复选框、下拉菜单、文本框等）的值。 思路： v
阅读全文
摘要：接上一篇... V标签综合使用：记事本案例 功能： 在实现列表渲染和删除功能的基础上，增加了数据添加以及数据统计，同时要求底部统计和清空区域在事件数目为0时不显示。 思路： 整体架构分为三部分：头部使用v-model绑定用户输入，并且绑定add方法，通过回车或点击按钮触发数据添加事件；主体部分使用
阅读全文
