行者无疆
登录/注册
首页
随笔
程序开发
Web
点滴
留言本
圈子
灵魂与肉身有一样要常在路上
大家都在搜:
当前位置:
首页
>
程序开发
>
Web
> VUE3快速入门(4)——Setup语法糖与数据绑定
VUE3快速入门(4)——Setup语法糖与数据绑定
bnbplayer
12个月前
(04-13)
Web
2771
 本文讲述了如何使用Setup语法糖简化代码,以及如何获取表单数据。在本系列后续的文章中,均使用setup语法糖写法。 ------------ # 1. Setup语法糖 使用Setup导出数据或者方法必须使用return,当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容,也不必再写setup方法名。 ## 1.1 声明组件导出 首先将\ ``` 注意: 1. lang属性对应的语言必须与上一个\ ``` 这样,凡是在setup语法糖内定义的数据和方法全部自动导出,不用再return。 # 2. 数据绑定 数据绑定是指获取表单中填写的值。 ## 2.1 创建一个表单 在合适位置增加一个表单标签: \
## 2.2 创建变量并绑定表单的值 创建一个变量,用于接收表单的值: ```javascript let input_content = "" ``` 在表单标签内使用v-model指令将表单值与该变量绑定: ```html
``` ## 2.3 测试 修改button的click事件,单击时弹出表单的值: ```html
单击
``` 其中show方法代码: ```javascript function show(content: any): any { alert(content); } ``` # 3. 总结 1. 使用setup语法糖就无需再显式声明导出的内容,但要求两个\
网站分类
随笔
程序开发
Web
标签列表
VUE
(10)
php
(1)
zblog
(1)
最新留言
好久没更新了...现在学习得怎么样了?
还得加上一条,找一个相爱的人度余生。幸福的定义首先是不孤独。
去年接触到了一个Vue开发的前端,觉得好玩,就折腾学习了一阵,唉,悟性有限,啥底层啥逻辑其实也没搞懂,就只会修改一下下页面,然后学会了一个npm run build,哈哈哈,你站我得收藏了,立个flag,过阵子抽个时间来系统性学习下。
你是第一个认真回复而不是打广告的观众 ^_^
好技术的博文,还真看不懂~