当前位置:首页 > 程序开发 > Web > VUE3快速入门(3)——方法与事件

VUE3快速入门(3)——方法与事件

bnbplayer2个月前 (02-08)Web162

扫描二维码推送至手机访问。

版权声明:本文由行者无疆发布,如需转载请注明出处。

本文链接:http://xinz.run/post/7.html

标签: VUE
分享给朋友:

“VUE3快速入门(3)——方法与事件” 的相关文章

VUE3快速入门(1)——搭建开发环境

VUE3快速入门(1)——搭建开发环境

教程其实是由站长自己的学习笔记整理而来。本系列教程用于VUE3的快速入门,仅讲解最基础的知识,旨在帮助大家搭建VUE技术的大致框架,从而在做实际项目的过程中快速定位问题,找到解决方向。教程直接从vite等工具的使用开始,以VUE最强大的组件为切入点,逐渐添加数据绑定、DOM事件处理、路由等内容,不断完善功能,让读者尽快上手小项目,缩短学习周期。 每篇教程后面留有拓展学习与思考小节,读者可通过该小节提出的问题或要求进行拓展学习,由点及面,丰富学习内容,并培养技术迁移和举一反三的能力。 特别地,本系列教程适合做过前端开发但技术较陈旧(jQuery、HTML4、前后端无分离)的读者学习,不会讲解HTML标签、CSS、JS/ES6语法等内容,因此不适合对前端开发一无所知的小白。学习本系列教程需要具备如下知识或能力: JavaScriptHTML及CSSES6语法(TypeScript)cmd命令系统环境变量配置面向对象的概念(方法、属性、字段等)具有控件的概念以及封装、复用的思想 如读者的上述知识有所欠缺,建议先完善web开发的基本知识体系。参考学习网站:菜鸟教程或百度、ChatGPT等。 站长自己学习的资料来源于《尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程》,因此建议读者配合该视频学习更多技术细节。 1. 安装Node.js下载Node.js: NodeJS下载 到官网下载自己系统对应的版本,下载完成后解压,可以看到里面有一个node.exe的可执行文件。把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现版本号,说明已经安装正确。 设置国内镜像: npm config set registry http://registry.npmmirror.com 2. 创建工程安装好 npm 之后,直接可以创建vue3工程。执行命令: npm create vue@latest 其中第一次运行要求安装create-vue@latest,输入“y”回车即可。 3. 设置工程选项根据实际情况填写选项,其中建议使用TypeScript和Vue Router,工程名字不要出现中文和空格。参考配置如下: √ 请输入项目名称: ... vue3-test √ 是否使用 TypeScript 语法? ... 否 / 是 √ 是否启用 JSX 支持? ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是 √ 是否引入 Pinia 用于状态管理? ... 否 / 是 √ 是否引入 Vitest 用于单元测试? ... 否 / 是 √ 是否要引入一款端到端(End to End)测试工具? » 不需要 √ 是否引入 ESLint 用于代码质量检测? ... 否 / 是 4. 执行在cmd中用cd命令打开刚才的工程目录,再分别执行命令: npm install npm run dev 会看到npm将下载一些列的依赖包。执行第二条指令后,会出现如下类似的提示: VITE v5.1.4 ready in 708 ms [ Local: http://127.0.0.1:5173/ [ Network: use --host to expose [ press h + enter to show help 将地址复制到浏览器,会看到“You did it!”的页面。 5. 在VSCODE中开发下载并安装VSCode后,依次选择“文件”、“打开文件夹”,选择VUE工程目录即可。可根据IDE右下角的提示安装相关的拓展。 6. 拓展学习与思考6.1 npm常见命令速查6.1.1. npm本地安装与全局安装npm install <模块名> # 本地安装,则是将模块下载到当前命令行所在目录% npm install -g <模块名> # 全局安装,模块将被下载安装到【全局目录】中 6.1.2. 配置全局目录及缓存目录分别使用以下命令设置全局的安装包目录及缓存目录: npm config set prefix <目录> npm config set cache <目录> 6.1.3. 其他常见命令npm init # npm 初始化当前目录 npm i # 安装所有依赖 npm i <模块名> # 安装模块到默认dependencies npm i <模块名> -g # 会安装到配置的全局目录下 npm i <模块名> -S # 安装包信息将加入到dependencies生产依赖 npm i <模块名> -D # 安装包信息将加入到devDependencies开发依赖 npm i <模块名>\@1.8.3 # 安装指定的1.8.3版本 注意,i是install的简写。 npm uninstall <模块名> # 卸载模块,但不卸载模块留在package.json中的对应信息 npm uninstall <模块名> -g # 卸载全局模块 npm uninstall <模块名> --save # 卸载模块,同时卸载留在package.json中dependencies下的信息 npm uninstall <模块名> --save-dev # 卸载模块,同时卸载留在package.json中devDependencies下的信息 npm update <模块名> # 更新最新版本的模块 npm update <模块名>@2.1.0 # 更新到指定版本号的模块 npm install <模块名>@latest # 可以直接更新到最后一个新版本 npm root # 查看项目中模块所在的目录 npm root -g # 查看全局安装的模块所在目录 npm list 或者 npm ls # 查看本地已安装模块的清单列表 npm view <模块名> dependencies # 查看某个模块对于各种模块的依赖关系 npm view <模块名> version # 查看模块最新的版本号 npm view <模块名> versions # 查看模块所有历史版本号 npm view <模块名> # 查看最新的模块版本的信息 npm info <模块名> # 查看模块的详细信息,等同于上面的npm view npm list <模块名> 或 npm ls <模块名> # 查看本地已安装的模块的详细信息 npm view <模块名> repository.url # 查看模块的来源地址 6.2 思考 VUE技术栈...

VUE3快速入门(4)——Setup语法糖与表单取值

VUE3快速入门(4)——Setup语法糖与表单取值

本文讲述了如何使用Setup语法糖简化代码,以及获取表单数据的方法。 1. Setup语法糖使用Setup导出数据或者方法必须使用return,当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容,也不必再写setup方法名。 1.1 声明组件导出首先将<script>代码中的setup方法部分全部移除,仅留下组件导出声明: <script lang="ts"> export default { name: "MyComp", } 1.2 创建setup语法糖其次,新增一个<script>片段,如下: <script lang="ts" setup> </script> 注意: lang属性对应的语言必须与上一个<script>的代码语言一致,不得JS、TS混用;setup语法糖所在的<script>必须增加一个setup属性 1.3 在setup语法糖标签内写代码最后将原本setup方法里面的内容除了return外全部放入后一个<script>标签内,完整代码如下: <script lang="ts" setup> let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; function add(a: number, b: number): number{ return a + b; } function show(content: any): any { alert(content); } //无需return {author, mail, ...} </script> 这样,凡是在setup语法糖内定义的数据和方法全部自动导出,不用再return。 2. 数据绑定数据绑定是指获取表单中填写的值。 2.1 创建一个表单在合适位置增加一个表单标签: <input name=””/> 2.2 创建变量并绑定表单的值创建一个变量,用于接收表单的值,如 let input_content = “” 在表单标签内使用v-model指令将表单值与该变量绑定: <input name="" v-model="input_content"/> 2.3 测试修改button的click事件,单击时弹出表单的值: <button @click="show(input_content)">单击</button> 其中show方法代码: function show(content: any): any { alert(content); } 3. 总结 使用setup语法糖就无需再显式声明导出的内容,但要求两个<script>片段语言类型一致;v-model指令用于将表单值与变量绑定;v-model指令仅能用于表单相关的标签。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。