![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
使用Vue3进行前端开发
文章平均质量分 90
Python私教
收徒弟,接私活,有直播课和私教课,可以做家教和川渝线下教学,包教会 18010070052。
展开
-
17 Vue3中的emit传值
我们已经看到,道具用于将数据从父组件传递到子组件。为了将数据从子组件传递回父组件,Vue 提供了自定义事件。emitmethod;在组件中,我们可以使用emit方法、在script中使用thisemit(‘eventName’, payload) 或在模板部分使用 $emit 来发射事件。原创 2023-12-17 20:07:31 · 1007 阅读 · 0 评论 -
16 Vue3中的refs引用
在 Vue 中,Refs 是对 DOM 元素或已安装到 DOM 的其他组件实例的引用。refs 的主要用途之一是直接操作 DOM 并与基于 DOM 的库集成(这些库通常需要挂载到一个 DOM 节点),例如动画库。我们可以在模板中的原生元素或子组件上使用 ref=“name” 语法来定义引用。在下面的示例中,我们将为输入元素添加一个引用,名称为 theInput。原创 2023-12-17 19:52:41 · 655 阅读 · 0 评论 -
15 Vue3中的slot插槽
槽是组件的一部分,其中的模板/渲染被委托给组件的父节点。我们可以将槽视为模板或标记,它们从父模板传递给子模板,以便在其主模板中呈现。原创 2023-12-17 19:34:10 · 873 阅读 · 0 评论 -
14 Vue3中组件的props属性
Vue 允许使用 validator 属性将自定义验证器用作道具。这样,我们就可以对对象和集合类型进行深度检查。让我们来看看自定义选择组件。从根本上说,"选择 "的道具界面包括一个选项阵列和一个选定的选项。每个选项都应该有一个标签,代表在选择时显示的内容,以及一个代表其实际值的值。所选选项的值可以是空的,也可以等于某个选项的值域。我们可以用一种简单的方式(不对输入进行验证)实现 CustomSelect,具体如下:props : {props : {props : {props : {原创 2023-12-17 19:07:31 · 1217 阅读 · 0 评论 -
13 在Vue3中使用axios异步加载数据
JavaScript 中的异步函数由 async 语法定义,并返回一个 Promise。这些函数通过事件循环进行异步操作,使用隐式 Promise,即可能在未来返回结果的对象。作为 JavaScript 语言的一部分,您可以通过在方法前添加 async 关键字,在 Vue 组件的方法中声明异步代码块。您可以使用 Promise 连锁方法,如 then() 和 catch() 函数,或在这些 Vue 方法中尝试使用 ES6 的 await 语法,并返回相应的结果。原创 2023-12-17 16:39:45 · 1367 阅读 · 0 评论 -
12 Vue3中的监听器
Vue 观察器以编程方式观察组件数据,并在特定属性发生变化时运行。观察数据可包含两个参数:oldVal 和 newVal。这有助于您在编写表达式时,在写入或绑定新值之前比较数据。观察者可以观察对象以及其他类型,如字符串、数字和数组类型。要清理观察者代码,可以为已定义组件的方法指定一个处理程序参数,这被认为是大型项目的最佳做法。观察者是对计算数据使用的补充,因为它们被动地观察值,不能作为普通的 Vue 数据变量使用,而计算数据必须始终返回值,并且可以查询。如果需要 Vue 上下文,切记不要使用箭头函数。原创 2023-12-17 16:15:45 · 1026 阅读 · 0 评论 -
11 Vue3中的computed计算属性
计算属性是一种独特的数据类型,只有在属性中使用的源数据更新时才会被动更新。通过将数据属性定义为计算属性,我们可以执行以下活动:在原始数据属性上应用自定义逻辑,计算计算属性的值跟踪原始数据属性的变化,计算计算属性的更新值在 Vue 组件中的任何位置将计算属性作为本地数据重复使用默认情况下,Vue 引擎会自动缓存计算属性,这使得它们在更新 UI 时比使用数据返回值的属性或使用 Vue 组件的方法更高效。计算属性的语法就像编写一个带有返回值的组件方法,嵌套在 Vue 组件的计算属性下:export。原创 2023-12-17 13:03:31 · 458 阅读 · 0 评论 -
10 在Vue3中使用SCSS编写样式
使用 Vue 组件时,Vite 编译器允许您使用几乎任何前端模板语言风格。在 Vue 模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install(或 yarn add)安装包。在 Vue 组件中使用样式标签时,只要安装了特定的语言插件,就可以使用 lang 属性指定语言。然后,就可以在样式标签中添加 lang=“stylus” 属性,开始使用 Stylus:color;color;原创 2023-12-17 11:47:26 · 1365 阅读 · 0 评论 -
03 Vue3中的生命周期函数
Vue 组件生命周期事件发生在组件从创建到删除的生命周期中。必要时,我们可以在组件生命周期的每个阶段添加回调和副作用。原创 2023-12-17 11:27:21 · 1003 阅读 · 0 评论 -
08 在Vue3中使用方法
在 Vue 2.0 中,Vue 在 methods 对象中定义了组件方法,作为 Vue 实例的一部分。你可以将每个组件方法编译成一个普通的 JavaScript 函数。Vue 方法的作用域是您的 Vue 组件,可以在其所属组件的任何位置运行。它还可以访问 this 实例,该实例表示组件的实例:exportdefaultmethodsmyMethodlog;原创 2023-12-17 00:01:45 · 556 阅读 · 0 评论 -
07 使用v-for实现循环渲染
了解迭代(或循环)不仅是使用 Vue 的关键,也是一般 JavaScript 的关键。既然我们已经介绍了如何使用 v-for 指令来处理循环,以及 key 属性对于正确增强反应性的重要性,那么我们将探讨如何在组件中使用、编写和触发方法。原创 2023-12-16 23:37:08 · 1178 阅读 · 0 评论 -
06 使用v-model实现双向数据绑定
Vue 通过创建一个专用指令来观察 Vue 组件中的数据属性,从而实现双向数据绑定。当用户界面上的目标数据属性被修改时,v-model 指令就会触发数据更新。该指令通常适用于既需要显示数据又需要对数据进行反应式修改的 HTML 表单元素,例如输入、文本区域、单选按钮等。在下一个练习中,我们将使用 Vue 的双向数据绑定构建一个组件,并尝试以两种方式绑定数据的含义。原创 2023-12-16 21:19:28 · 902 阅读 · 0 评论 -
05 Vue中常用的指令
所有基于 Vue 的指令都以 v-* 前缀作为 Vue 特有的属性。原创 2023-12-16 20:50:02 · 929 阅读 · 0 评论 -
04 在Vue3中使用setup语法糖
script>从 Vue 3.0 开始,Vue 为标签引入了一个新的语法糖设置属性。该属性允许您在 SFC 中使用 Composition API编写代码,并缩短编写简单组件所需的代码量。标签中的代码块在部署到浏览器之前会被编译成 render() 函数,从而提供更好的运行时性能。with然后,将替换为,并删除 export default… 的所有代码块。现在的示例代码如下In在原创 2023-12-16 20:29:58 · 1155 阅读 · 0 评论 -
02 使用Vite创建Vue3项目
Vue 项目的结构与许多基于节点的现代应用程序类似,包含以下内容:package.json 文件项目根目录下的 node_modules 文件夹其他各种配置文件通常包含在根级别,如 vite.config.js 和 .eslintrc.js,因为它们通常会对整个项目产生影响。默认情况下,根层级有一个 index.html 文件,作为加载 Vue 应用程序的占位符。您可以修改该文件以包含页眉和页脚脚本,如 Google 字体或未包含在捆绑包中的第三方 JavaScript 库。原创 2023-12-16 19:59:12 · 880 阅读 · 0 评论 -
01 Vue介绍
业内的开发人员必须快速解决前端开发问题,同时尽量减少对现有工作流程或后端架构的影响。在任何情况下,开发人员都倾向于在项目结束前忽略用户界面,这可能是由于缺乏资源、产品要求不断变化,或者认为前端是最简单的部分。然而,苹果和谷歌等公司已经证明,对前端设计进行深入思考,是打造稳固的产品或平台的关键所在,它能激发和吸引用户,从而带来更高的投资回报和更成功的业务。如果你了解 Vue,你可能还接触过其他前端框架,从表面上看,它们解决了同样的问题,如 Ember、Angular 或 React。原创 2023-12-16 19:58:21 · 1005 阅读 · 0 评论