vue3 - 初识setup

最新推荐文章于 2023-02-15 15:36:25 发布
最新推荐文章于 2023-02-15 15:36:25 发布
阅读量205 收藏
点赞数
分类专栏： vue3 文章标签： html vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/120190731
版权

在setup中写组件用到的属性和方法
在这里插入图片描述
知识点：
在这里插入图片描述

在这里插入图片描述

如果setup最后返回对象，则属性和方法在模板中都可以使用
在这里插入图片描述
效果
在这里插入图片描述

如果返回一个渲染函数

在这里插入图片描述
也可以用精简的return写法
在这里插入图片描述
此时页面只显示渲染函数里面的内容，不显示模板上的内容
在这里插入图片描述

vue3使用vue2的组合式api依然可以使用
在这里插入图片描述
在这里插入图片描述

在vue2中使用vue3中的属性和方法
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在vue3里读取vue2的属性和方法是不行的！

在这里插入图片描述

在这里插入图片描述
如果vue2和vue3混用，且属性名和方法名重名，会以vue3为主

vue2的a是100
在这里插入图片描述
vue3的a是200

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

公孙元二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3-demo2.rar
02-05
`setup`是Vue3组件的新入口点，它在生命周期钩子之前运行，并可以访问到`props`和`this`的上下文。在这里，你可以初始化状态、监听器和计算属性，使用Composition API来组织代码。 4. **Suspense 组件**： Vue3...
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v...
vue3：组件通过绑定对象来绑定属性
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-15 1465
新学到的组件透传的方法
vue3基于element-plus的组件二次封装数据双向绑定
pizixian_的博客
07-06 3731
vue3数据双向绑定，element-plus的二次封装
vue3 class与style绑定 与 script setup使用
Linlietao0587的博客
12-17 537
vue3 class与style绑定。
Vue3.0 script setup如何设置name进行页面缓存
qq_30994727的博客
03-17 4842
vue3.0之后使用script setup无法定义name属性，目前暂时实现了2个方案 1、手动给路由Component添加name slot传回来的Component官网没给类型，跟vnode很像 此方法获取在路由定义的name属性，不需要在页面定义name属性 <template> <router-view v-slot="{ Component, route }"> <KeepAlive :include="includes">
Vue3中属性的设置与修改
weixin_44301987的博客
10-28 4434
在vue3中所有的数据和函数都要在setup中编写 定义变量想要实现响应式需要使用ref() 例如：let name = ref(“张三”) 改变属性需要用 点value的方式获取定义的变量在进行赋值 例如： name.value=“李四” setup(){ let name = ref("张三呢"); let age = ref(18); let job = ref({ type: "前端工程师", salary: "30k", }); fu
VUE3-初识setup（2）
述安的博客
02-25 522
<template> <h1>一个人的信息</h1> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>性别：{{ sex }}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br>
vue3-初识
weixin_47268588的博客
11-10 105
vue3
vue3-captcha（vue3行为验证码）
06-20
Vue3-Captcha可能会使用setup函数来组织组件逻辑，以及import导入自定义函数和状态管理工具。 2. **自定义指令（Custom Directives）**：Vue3-Captcha可能使用自定义指令来绑定用户的行为事件，例如监听拖动滑块的...
vue-setup-mixins：vue-setup-mixins
02-15
Practice_s19-s20项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vue3-real-admin纯静态后台模板
08-04
vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台...
vue3 - ref函数处理对象类型数据
热门推荐
树上骑个猴的博客
09-15 1万+
打印一下用ref包裹的对象 打印出来发现，变成proxy对象，且不需要通过.value的形式获取响应式数据的值了。此时改成这么写： 页面数据更新了 分析： refimpl和proxy的区别： 如果对象也是用refimpl包裹对象，则会出现这种情况： 导致需要job.value.age.value才能获取到值，但实际不是，说明不是refimpl对象。说明也没用到get、set，因为refimpl就是对get、set的封装。 实际上在vue3里面处理引用数据类型变成响应式用的是proxy代理 ..
vue3 用vue-cli和vite启动项目
树上骑个猴的博客
09-06 7674
1.用vue-cli启动项目 2.用vite启动项目
vue3 - ref函数处理基本类型
树上骑个猴的博客
09-12 7111
需求：点击按钮更新页面数据 如果这么写，数据会更新，但是页面不会更新： 如果想让页面显示与数据同步，也就是响应式更新，要用ref， ref包裹后是个对象，是refImpl的实例对象
vue(或vue3)实现父组件给子组件传递样式变量及在css3内使用变量
树上骑个猴的博客
01-04 6307
在使用vue开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数。那么问题来了：我们要怎么在样式中使用组件中接收的参数呢？ 父组件页面： <children colors="red"/> <script> import { defineComponent } from 'vue'; import children from './children/index.vue' export default defineComponen.
vue3 - reactive函数处理基本类型和对象类型数据
树上骑个猴的博客
09-16 5232
如果拿reactive包裹基本数据类型 如果拿reactive包裹对象 如果用ref包括对象，则要多一级.value,不过实际上ref底层也是去调用reactive reactive可以包裹很深的对象数据类型 reactive也可以包裹数组类型，实现数组类型数据的响应式变化，此时修改数组的索引也能引起响应式变化，这在vue2的时候是不可实现的 如果要用reactive包裹基本数据类型，可以多包括一层{}： 总结：如果给引用数据类型使用ref也行，记得.value。如果给基本数据类型使.
vue3响应式原理-reflect
树上骑个猴的博客
09-23 4990
proxy负责对某个数据进行增删改查的监听，不过vue3底层不是直接对target进行如下的简单操作。而是利用es6的window.reflect 利用reflect取一个对象的属性 利用reflect修改对象属性 利用reflect删除对象的某个属性 object上的一些属性，reflect也有 比如给object定义相同属性名，会导致代码单线程卡住，阻塞下面代码运行 如果是使用reflect deflect会返回执行的结果 好处是，通过返回值就会知道成功还是失败。 对于vue3而言，
vue3-seamless-scroll单页面非setup引用
最新发布
01-30
在Vue3中，如果你想在单个.vue文件中局部注册vue3-seamless-scroll插件而不使用setup函数，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了vue3-seamless-scroll插件。你可以使用npm或者yarn来安装它： ``...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值