Vue
文章平均质量分 89
码农白衣
初次见面,请多关照
展开
-
初识Vue-混入mixins(详解分发 Vue 组件中可复用功能)
混入是一种将可复用功能注入到 Vue 组件中的方式,它允许你将组件中的一些选项混合到多个组件中。混入是一种Vue.js提供的一种灵活的代码复用方式,允许将一组组件选项合并到一个对象中,然后将其应用到多个组件中。可以使用在Vue实例创建之前全局注册一个混入,使得混入对象中的选项对所有组件都可用。在组件中使用mixins选项引入一个或多个混入对象,使得这些混入对象中的选项对该组件及其子组件可用。混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。原创 2024-05-06 20:19:36 · 1103 阅读 · 1 评论 -
初识Vue-生命周期函数(详解如何让组件在不同阶段执行相应操作)
生命周期函数是在Vue组件生命周期中的特定时间点执行的函数。Vue实例有一个完整的生命周期,从创建、挂载、更新到销毁。在这个过程中,Vue提供了一系列的钩子函数,让你能够在特定阶段执行自定义逻辑。生命周期函数是在Vue组件实例化、挂载、更新、销毁等不同阶段触发的钩子函数,用于执行特定的操作。: 在实例初始化之后,数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段,组件实例的选项对象已经被处理,但实例的数据和方法尚未初始化。created。原创 2024-05-06 20:11:55 · 1119 阅读 · 1 评论 -
初识Vue-插槽(详解插槽slot的运用)
Vue.js中的插槽是一种机制,允许你在父组件中将任意内容传递给子组件,使得组件更加灵活和可复用。插槽允许你定义一个模板,并在子组件中定义插槽的位置,然后在父组件中填充内容。插槽是 Vue.js 中一种强大的组件化技术,允许父组件向子组件传递内容。它允许子组件在特定位置接收父组件传递的内容,并在其内部渲染。默认插槽是没有名字的插槽,用于接收父组件传递的内容。父组件可以在子组件的默认插槽中传递任意内容,子组件可以在相应位置渲染这些内容。命名插槽允许父组件传递具有特定名称的内容到子组件中的相应插槽中。原创 2024-05-05 22:37:07 · 1194 阅读 · 2 评论 -
初识Vue-组件通信(详解props和emit)
在组件化开发中,一个应用程序通常由多个组件组成。这些组件可能位于不同的层级,有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。Props 允许父组件向子组件传递数据。子组件通过 props 接收父组件传递的数据,并可以在组件内部使用这些数据。父组件使用 v-bind 指令将数据传递给子组件,并在子组件标签上使用相应的 prop 名称。Custom Events 允许子组件向父组件发送消息。原创 2024-05-04 22:57:35 · 1017 阅读 · 2 评论 -
初识Vue-脚本架(如何创建vue项目并使用)
Vue 脚手架”通常指的是 Vue CLI,是一个官方提供的命令行工具,用于快速搭建 Vue 项目。Vue CLI 提供了一套标准化的项目模板和一系列的开发工具,使得创建、管理和部署 Vue 项目变得更加简单和高效。快速创建项目:使用 Vue CLI,你可以在几秒钟内创建一个新的 Vue 项目,而无需手动设置项目结构。可配置的项目预设:Vue CLI 提供了几种预设配置,包括默认配置、手动配置和预设模板(如 Babel、TypeScript、ESLint 等),以满足不同项目的需求。内置开发服务器。原创 2024-05-03 12:17:49 · 1068 阅读 · 0 评论 -
初识Vue-组件化开发(应用实例)
开发一个简单的任务管理应用,其中包含任务列表和添加任务的功能。我们可以使用 Vue.js 来构建这个应用,并将其组件化。在这个示例中,我们创建了一个简单的任务管理应用。任务列表组件用于显示任务列表,添加任务组件用于添加新任务。在应用入口组件中,我们将这两个组件组合在一起,并通过 props 和事件进行通信。通过这种方式,我们实现了组件化开发,使得应用的各个功能模块独立、可重用和易于维护。显示商品列表将商品添加到购物车显示购物车中的商品列表计算购物车中商品的总价。原创 2024-05-02 12:00:13 · 832 阅读 · 0 评论 -
初识Vue-组件化开发(详解各个组件)
Vue.js中的组件是可复用的Vue实例,具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块,使得代码更易维护、可读性更高。每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。const RootComponent = { /* 选项 */ }// 创建一个Vue 应用。原创 2024-05-02 08:06:07 · 1310 阅读 · 1 评论 -
Vue的列表渲染和双向绑定(初学vue之v-for以及v-model)
列表渲染是指将数据集合(通常是数组)中的每个数据项渲染成相应的 DOM 元素,通常用于显示列表、表格等内容。双向绑定是指视图(DOM)与数据模型之间的双向关联,当数据模型发生变化时,视图会更新;反之亦然,当用户在视图中输入内容时,数据模型会相应地更新。原创 2024-04-23 16:51:15 · 1316 阅读 · 0 评论 -
Vue-条件渲染(初识vue渲染)
条件为真时显示的内容原创 2024-04-19 19:49:11 · 1381 阅读 · 0 评论 -
Vue之事件绑定(初识Vue事件)
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件,当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制,它使得开发者可以轻松地响应用户的交互行为,并进行相应的逻辑处理。当在 Vue 中使用事件绑定时,通常会使用v-on或简写形式来监听 DOM 事件,并在触发事件时执行相应的方法。监听事件:使用v-on指令来监听 DOM 事件,语法为v-on:event,其中event是要监听的事件名,例如clickmouseover等。也可以使用简写形式。原创 2024-04-19 18:32:11 · 1126 阅读 · 0 评论 -
Vue模版语法(初学Vue之v-指令语法)
在Vue.js中,v-开头的指令是用来添加动态行为到你的HTML元素或者组件上的。这些指令可以被应用到普通的HTML元素上,也可以用在Vue.js组件上。v-开头的指令是Vue.js中用来添加动态行为到HTML元素或者组件上的。将HTML属性绑定到Vue实例的数据上。创建双向数据绑定,用于表单控件元素。根据条件渲染元素。循环渲染列表。绑定事件监听器,触发响应函数。根据条件控制元素的显示和隐藏。跳过元素和子元素的编译过程,用于显示原始Mustache标签。原创 2024-04-18 16:48:33 · 759 阅读 · 0 评论 -
Vue的基础语法(初学Vue)
Vue.js(通常简称为 Vue)是一款流行的开源 JavaScript 前端框架,用于构建交互式的用户界面和单页面应用程序(SPA)。Vue 的设计灵感主要来自于 Angular 和 React,但它的核心库更小巧,易于上手,并且具有更快的渲染速度。原创 2024-04-17 20:47:18 · 1046 阅读 · 0 评论