文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:Vue3中的大热门——其他技术

宣传部部长

宣传部部长

2024-04-23 23:20

关注

  API就是操作系统留给应用程序的一个调用接口,应用程序通过调用操作系统的API而使操作系统去执行应用程序的命令。API与图形用户接口(GUI)或命令接口有着鲜明的差别:API接口属于一种操作系统或程序接口,而后两者都属于直接用户接口。

  全局安装/配置API更改

  在Vue2.x中对全局属性和全局API函数是这么玩的

  importVuefrom'vue'

  importAppfrom'./app.vue'

  Vue.config.ignoredElements=[/^app-/]

  Vue.use()

  Vue.mixin()

  Vue.component()

  Vue.directive()

  newVue({

  render:h=>h(App)

  }).$mount('#app')

  现在,让我们看看它如何在Vue3中运行:

  import{createApp}from'vue'

  importAppfrom'./App.vue'

  constapp=createApp(App)

  app.config.ignoredElements=[/^app-/]

  app.use()

  app.mixin()

  app.component()

  app.directive()

  app.mount('#app')

  您可能已经注意到,每个配置都限于使用定义的某个Vue应用程序createApp。

  它可以使您的代码更易于理解,并且不易出现由第三方插件引起的意外问题。当前,如果某些第三方解决方案正在修改Vue对象,则可能会以意想不到的方式(尤其是全局混合)影响您的应用程序,而Vue3则无需担心。

  Fragment

  如果您创建一个Vue组件,则它只能有一个根节点。

  这意味着无法创建这样的组件:

  <template>

  <div>Hello</div>

  <div>World</div>

  </template>

  原因是代表任何Vue组件的Vue实例都需要绑定到单个DOM元素中。创建具有多个DOM节点的组件的唯一方法是通过创建不具有基础Vue实例的功能组件。

  当前,Vue2中可以使用vue-fragments库,而在Vue3中,您可以立即使用它!

  vue-fragments参考写法

  <template>

   <v-fragment>

   <div>Hello</div>

   <div>World</div>

   </v-fragment>

   </template>

  Suspense

  其可以帮助我们更简易的使用异步请求及处理Loading组件的展示

  <Suspense>

  <template>

  <Suspended-component/>

  </template>

  <template#fallback>

  Loading...

  </template>

  </Suspense>

  Suspense可以挂起Loading内容将一直显示到Suspended-component完全渲染为止。挂起可以等待,直到该组件被下载(如果这是一个异步组件),或者在setup功能上执行一些异步操作。

  多个v-model

  V模型是一种指令,可用于在给定组件上实现双向绑定。我们可以传递反应性属性并从组件内部对其进行修改。

  看看v-model:

  <inputv-model="property/>

  将以上示例重写为以下语法将具有完全相同的效果:

  <input

  v-bind:value="property"

  v-on:input="property=$event.target.value"

  />

  假如我们希望用v-model同样给该元素添加change事件、变更checked值进行绑定的话。

  不幸的是,v-model每个组件只能有一个组件。

  在Vue3中这不会成为问题!您将能够提供v-model属性名称,并根据需要拥有任意数量的属性。在下面,您可以v-model在表单组件中找到两个的示例:

  <InviteeForm

  v-model:name="username"

  v-model:email="email"

  />

  Portals

  Portals是特殊的组件,用于在当前组件之外呈现某些内容。

  如果父组件有overflow:hidden或z-index样式,子组件作为模态框、弹出窗口以及通常显示在页面顶部的组件的时候,可能会因为z-index不足,被其他元素覆盖,有了Portals就可以放心了!

  对于每个Portals,我们需要指定它的目标目标,在其中将呈现Portals内容。在下面,您可以看到portal-vue库的实现,Vue2中可以这么用:

  <portalto="destination">

  <p>此插槽内容将呈现在name为“destination”的portal-target所在的任何位置。</p>

  </portal>

  <portal-targetname="destination">

  <!--

  此组件可以位于应用程序中的任何位置。

  上面porta组件的槽内容将在此处呈现。

  -->

  </portal-target>

  Vue3将附加对portals的开箱即用支持!

  新的自定义指令API

  自定义指令API在Vue3中将略有变化,以更好地与组件生命周期保持一致。这项更改将使API更加直观,从而使新手更容易理解和学习API。

  这是当前的自定义指令API:

  constMyDirective={

  bind(el,binding,vnode,prevVnode){},

  inserted(){},

  update(){},

  componentUpdated(){},

  unbind(){}

  }

  ……这就是Vue3中的样子。

  constMyDirective={

  beforeMount(el,binding,vnode,prevVnode){},

  mounted(){},

  beforeUpdate(){},

  updated(){},

  beforeUnmount(){},//new

  unmounted(){}

  }

  即使这是一项重大更改,也应该使用Vue兼容性构建轻松涵盖。

  应用程序接口是一组定义、程序及协议的集合,通过API接口实现计算机软件之间的相互通信。API的一个主要功能是提供通用功能集。程序员通过调用API函数对应用程序进行开发,可以减轻编程任务。API同时也是一种中间件,为各种不同平台提供数据共享。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯