文章 2022-11-25 来自:开发者社区

Vue组件入门(九)v-model 自定义修饰符

前言我们在自定义组件上使用v-model的时候,考虑到有时候想对输入的东西进行格式化处理,为此vue官方也为我们提供了一些,比较常用的修饰符,例如 .trim,.number 和 .lazy。这些我们之前的章节有提到过,有兴趣的可以往期翻一翻。但是对于有些特别业务的场景,官方所提供的修饰符并不能满足我们的需要。而官方也考虑到这种情况,为我们提供了自定义修饰符的功能。下面我们就来看一看如果自定义v....

文章 2022-11-25 来自:开发者社区

Vue组件入门(十)Attributes 继承

前言在我们使用一个组件的时候,并在上面添加相应的class样式的时候,你会发现,他会进行一个透传,作用于子组件的内容元素,当然,也包括一些点击事件等等,而这就是Attributes 继承。而他会怎么继承呢?以何种规则继承呢?下面我们来具体看一看。Attributes 继承当我们的一个组件以单个元素为根进行渲染时,使用该组件并在上声明的props、emits属性以外的元素,进行透传。该组件的根元素....

文章 2022-11-25 来自:开发者社区

Vue组件入门(十二)具名插槽

前言之前的章节我们介绍过,如果想给子组件传递模板片段,并让其在子组件中进行渲染,可以通过插槽来实现。也就是在子组件中想插入父组件模板代码的位置上添加 slot 标签即可。而通过使用插槽,可以让我们更好的复用组件,并可以使其的ui保持一致,不仅提高了组件的灵活性,还使得内容的更加的自定义化。而随着业务的不断复杂化,对于子组件的要求也可能变得更高。在一个组件中,对于插槽的使用可能需要在其多个位置中插....

文章 2022-11-25 来自:开发者社区

Vue组件入门(十三)作用域插槽

前言之前我们说过,当在父组件中,向子组件中传入模板片段的时候,也就是在插槽编写代码时。我们在插槽内是只能访问父组件作用域内的数据,而无法访问子组件内部的数据。 而在某些特殊的业务场景下,我们想同时可以访问父组件和子组件内部的数据。而要实现这种效果,我们要怎么做呢?这就要用到我们今天所说的作用域插槽了。下面就让我们来一探究竟。作用域插槽上面我们已经说了,插槽内的代码可以访问父组件内部的数据。所以我....

文章 2022-11-25 来自:开发者社区

Vue组件入门(十四)依赖注入

前言之前我们说过,通过props可以在父组件中向子组件传递数据。但是有些时候,子组件的下面还有子组件,组件会出现多层嵌套的情况,当最深层组件需要父组件的数据的时候,就会出现一个props逐级透传的情况,而组件也会形成一个一个巨大的组件树。而在这个props的传递过程中,你会发现其中的有些组件可能并不需要这些props传递下来的数据,但是为了保证最深层的组件得到预期的数据,只能进行逐级透传。显然这....

文章 2022-11-25 来自:开发者社区

Vue组件入门(十五)异步组件

前言在我们开发大型项目的时候,为了更好的模块化,我们势必会项目拆分成很多块,也就是组件。而在我们加载某些页面的时候,为了提高加载速度,我们往往并不需要当前页面的所有组件加载出来,而是到使用到它的时候再进行相应的请求来得到组件。而为此,vue提供了defineAsyncComponent方法来解决我们的问题,也就是异步组件。下面就让我们来看一看。异步组件defineAsyncComponent接受....

文章 2022-11-25 来自:开发者社区

Vue3入门指北(四)computed (计算属性)

前言当我们需要通过复杂的逻辑处理来得到我们想要的数据时,如果通过在模板中运用表达式计算的话,虽然很方便。但如果写太多的话,往往会使的整个模板变得臃肿,难以维护。而对于这种情况,vue3提供了 computed api帮助我们解决这种问题。下面就让我们来看一看。computed比如我们有如下一些信息:const class = reactive({ name: '五年二班', studen...

文章 2022-11-25 来自:开发者社区

Vue3入门指北(八)v-model

前言假如我们有一个表单输入框,在进行表单处理的时候,我们想把输入框的内容同步的更新到定义的JavaScript变量时,我们可能会如下写:<input :value="text" @input="event => text = event.target.value"> 复制代码不过对于这种情况,vue做了相应的简化,通过一个v-model指令即可实现。<input ...

文章 2022-11-25 来自:开发者社区

Vue3入门指北(十)侦听器

前言在某些场景下,我们可能需要监听某一地方的结果去修改另一个地方的状态。我们就可以通过使用watch()函数,来实现状态变化时,触发内部的回调函数。watch()在组合式API中,可以如下使用:&lt;script setup&gt; import { ref, watch } from 'vue' const num = ref(0) // 可以直接侦听一个 ref watch(num, (n....

文章 2022-11-25 来自:开发者社区

Vue组件入门(三)插槽和动态组件

前言在组件的运用中,在父组件有些时候我们可能需要传递一些html片段在子组件中显示,当然通过props也可以实现。但是vue给我们提供了一个更加便捷的方法,那就是插槽。它可以使我们使用组件就像是使用普通HTML标签一样,而闭合标签的内部就是我们在父组件中想要在其子组件展示的内容。slot当我们想像使用 html 标签式的使用组件时,也就是说在闭合的组件标签内传入我们想要传入的内容,我们就可以使用....

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问