setup语法糖的优势

最新推荐文章于 2024-03-20 09:01:13 发布
最新推荐文章于 2024-03-20 09:01:13 发布
阅读量195 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu12333322/article/details/128891666
版权

setup语法糖的优势

组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，如果是export default
的写法，还需要使用components选项内注册引入的组件。

变量和方法无需返回，直接使用

在之前的写法中，定义数据和方法，都需要在结尾 return 出去，才能在模板区中使用。在 script setup 中，
定义的属性和方法无需返回，可以直接使用

小桐学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus】开发框架
01-09
该项目集成了 Vue3 Vite setup语法糖 Pinia VueRouter Element Plus Axios 等，目前公司必备开发知识、已封装为二次开发框架，减少项目构建以提升开发效率，基础语法偏多，更适合于基础较弱的同学。其中包括了Element Plus 表格操作、弹窗组件的封装和复用，mixin公共方法的封装，以及后台管理系统中最重要的权限路由管理以及动态渲染左侧菜单等。以及对构建工具 vite.config.js 进行的简单配置、Pinia数据持久化的解决方案，嵌套路由的配置等。
script setup 响应式：核心
08-31
script setup 响应式：核心
vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽
最新发布
03-20 180
引入子组件可以自动注册，无需 components 注册可直接使用等等，接下来介绍 script setup 语法糖具体使用以及与 setup() 函数的区别。在 script setup 语法糖中，引入的组件可以自动注册，不需要再通过 components 进行注册，而且无法指定当前组件的名字，会自动以文件名为主，省去了 name 属性。使用 script setup 语法糖，不需要 return 和 setup函数，只需要全部定义到 script setup 内。
使用SpringBoot2和Vue3 Setup语法糖、 Composition Api开发的简洁、易用的低代码中后台解决方案
05-01
SmartAdmin使用SpringBoot2 和 Vue3 Setup标签、 Composition Api (同时支持JavaScript和TypeScript双版本) ，开发出的一套简洁、易用的低代码中后台解决方案！ 我们开源一套漂亮的代码和一套整洁的代码规范，让大家在这浮躁的代码世界里感受到一股把代码写好的清流！同时又让开发者节省大量的时间，减少加班，快乐工作，热爱代码，更热爱生活。
Vue3中 setup 语法糖写法
xiang8766的博客
01-22 810
及组合式API,是根据逻辑相关性组织代码的，提高可读性和维护性。了，重复性使用相同代码的逻辑。所以在vue3中这样引用写个语法糖，1.直接引入组件，且不需要注册；2.属性和方法也不需要返回；
Vue3 setup以及setup语法糖的基本使用
qq_43641110的博客
04-06 2446
Vue3 setup以及setup语法糖的基本使用
vue3 script setup 中使用 component 动态切换导航栏
wk的博客
03-24 3125
vue3 script setup 中使用 component 动态切换导航栏
vue3中script setup获取动态组件component的Dom
weixin_47908090的博客
07-12 2997
vue3中script setup获取动态组件component的Dom
Vue3 script-setup 使用指南
油墨香^-^的博客
02-14 4701
本文主要是讲解与TypeScript的基本使用。是什么？是在单文件组件 (SFC) 中使用的编译时语法糖。本文写作时，vue使用的 3.2.26 版本。
第九章、Vue3中＜script setup＞语法糖
weixin_42321326的博客
02-06 5392
第九章、Vue3中语法糖
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
nvm-setup-1.1.10
01-08
nvm-setup-1.1.10
vue3 setup语法糖中使用component动态组件
MuSui12的博客
11-16 6807
vue3 setup语法糖中使用component动态组件。
setup语法糖中的component组件无效
weixin_42943920的博客
06-03 410
setup语法糖中component动态组件无效
vue3在＜script setup＞中如何使用动态组件
webxxc的博客
12-22 8936
vue3在<script setup>中如何使用动态组件 在script setup中如何使用动态组件 ？ vue官方已经给出了说明。 由于组件被引用为变量而不是作为字符串键来注册的，在 <script setup> 中要使用动态组件的时候，就应该使用动态的 :is 来绑定： // 官方示例 <script setup> import Foo from './Foo.vue' import Bar from './Bar.vue' </script> &lt
Vue3 script setup 语法糖详解
热门推荐
weixin_66471060的博客
10-11 1万+
Vue3 script setup 语法糖详解
vue3 语法糖setup 动态加载组件
u014362204的专栏
10-09 1694
setup 动态加载组件 defineAsyncComponent使用
vue组件component的注册与使用
游小北的博客
08-01 4003
vue组件的概念、使用方法和注意事项（附代码、图片解析）
vue setUp语法糖
09-01
Vue的setUp语法糖是一种简化Vue组件代码的语法形式。它使用了单文件组件的方式，将模板、脚本和样式放在同一个文件中，使得组件更加易读和易维护。 在setUp语法糖中，使用<script setup>标签来定义组件的逻辑部分。在这个标签内，我们可以使用defineProps函数来声明props，并且具备完整的类型推断。比如可以这样声明props：const props = defineProps({ foo: String })。我们也可以使用withDefaults函数来为props设置默认值，比如const props = withDefaults(defineProps<Props>(), { msg: 'hello', labels: () => ['one', 'two'] })。 同时，在<script setup>标签中，我们可以直接使用emit函数来触发父组件的事件监听器，而不需要使用this.$emit。这样可以简化代码的书写。 在模板中，我们可以直接使用组件的标签名来引入自定义组件，而不需要在component对象里进行声明。比如<template> <MyComponent /> </template>，然后在<script setup>中import MyComponent from './MyComponent.vue'。 总的来说，Vue的setUp语法糖能够简化组件的编写和维护，使得代码更加清晰和易读。它提供了更加简洁的语法形式来定义props、触发事件等功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3中setup语法糖学习](https://blog.csdn.net/pdd11997110103/article/details/121438090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值