当前位置:首页 > VUE

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

bnbplayer8小时前8
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指令仅能用于表单相关的标签。...

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

bnbplayer2个月前 (02-08)161
VUE3快速入门(3)——方法与事件
本文讲述了如何在自定义组件中定义并调用方法,以及绑定DOM事件响应的方法。 1. 自定义方法1.1 定义一个方法在<script>标签内的setup方法内增加一个add方法,该方法传入两个参数,用于求和: function add(a: number, b: number): number{ return a + b; } 同时,将add方法暴露(返回): return {author, mail, tel, add};//author, mail, tel是上一节定义的变量 1.2 调用方法在<template>标签内,适当位置增加一个标签,用于调用方法: <h2>调用add方法: {{add(1,1)}}</h2> 1.3 查看结果编译、构建成功后,浏览器新出现“调用add方法: 2”的字样,说明求和方法被成功调用。 2. 绑定事件前端开发少不了处理DOM事件,如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。 2.1 绑定一个事件在<template>标签内,适当位置增加一个按钮,绑定click方法: <button @click="show(tel)">点我</button> 单击会调用test函数,并传入tel的值,该值在上一节已经定义: let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; 2.2 完善事件处理方法在<script>标签内setup方法内,再增加show方法,该方法具有一个传输参数: function show(content: any): any { alert(content); } 同时记得暴露该方法: return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量 2.3 执行编译、构建成功后,浏览器会出现一个按钮,点击按钮,将弹出对话框,其内容是tel变量的内容。 3. 总结 方法与变量一样需要写在methods属性内。@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。除了click外,还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。 4. 拓展学习与思考 除了v-on指令外,学习v-if、v-show、v-for的用法。尝试处理submit、onfocus等其他常见DOM事件。...

VUE3快速入门(2)——自定义组件

bnbplayer2个月前 (02-08)165
VUE3快速入门(2)——自定义组件
本文介绍了VUE组件的基本使用,包括定义组件、导出组件、引入组件、使用组件的基本过程,尤其是特别提示了组合式API与选项式API交互的问题。 1. 准备工作 用VSCode打开上节课“VUE3快速入门(1)——搭建开发环境”的文件夹。在VSCode选择“终端”、“新建终端”,准备用命令行执行npm相关指令。打开/src/app.vue文件,删除掉顶部代码 import TheWelcome from ‘./components/TheWelcome.vue’ 同时删除约17行的<TheWelcome />的标签,该步骤是为了删除对TheWelcome组件的引用,稍后将替换成自己编写的组件。 2. 新建一个组件2.1 新建文件在/src/components目录下新建一个文件:MyComp.vue 2.2 添加组件模板代码模板代码用于描述模板架构,由H5标签组成。模板代码写在<template>标签内,Vue2版本要求必须被<div>标签包裹,Vue3则无此要求。 <template> <h1>门禁管理系统</h1> <h2>作者:{{ author }},联系邮箱:{{ mail }},电话:{{ tel }}</h2> </template> 2.2 添加组件控制代码控制代码用于描述控制逻辑,实现相关功能。整体结构是一个被导出的类。在Vue3中,内部数据、方法、计算属性、传入属性等均写在setup方法内,目前先使用内部数据。 <script lang="ts"> export default { //组件名称 name: "MyComp", //组合式API setup() { let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; //返回外部需要的数据 return {author, mail, tel}; //上述代码返回的是一个键值对,当key=value时,可省略其中一个。否则需要写成key: value的形式,则外部需要通过key获取值:{{key}} } } </script> 2.3 添加组件样式代码控制代码用于描述组件外观,如字号、字体等,由css代码组成。样式代码写在<style>标签内。 <style scoped> font-size: 16px; </style> style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 3. 调用该组件3.1 引入组件在App.vue中的<script>标签内,增加语句: import MyComp from './components/MyComp.vue'; 3.2 使用组件在App.vue的<template>标签内,像使用H5标签那样,直接在期望展示的位置或者直接在刚才删掉<TheWelcome>处写上 <MyComp></MyComp> 即可。或简写为 <MyComp/> 4. 执行npm能热更新。当编译、构建完成无误后,页面将出现“作者:Jesse,联系邮箱:3898xxxx@qq.com,电话:136****615”的字样 5. 总结 组件分为<template>、<script>、<style>三个部分。<template>定义组件的骨架,<script>定义组件的业务逻辑,<style>定义样式。Vue2下<template>内的所有标签必须被<div>标签包裹,Vue3无此要求。export default用于导出该组件以便复用,其本质上是导出了一个类。如果做过C#、MFC的传统桌面端的开发,可以将组件理解为控件。Vue3下,外部需要的数据(包括内部数据、计算属性、方法等)均写在setup内,且通过return返回。使用组件需要先import引入,最后像使用H5标签一样调用该组件。建议所有组件样式都加上scoped属性,避免污染其他组件样式。 6. 特别提示 setup方法内不允许用this关键字。Vue2的data、methods等可以用this,且可以通过该关键字获取setup里的内容,但setup不能反过来获取data、methods等里面的内容。不要Vue2/3混用,即Vue3不要再用选项式API。 7. 拓展学习与思考 使用组件有什么好处?从创建组件到使用组件的步骤是什么样的?选项式API与组合式API有什么区别?...

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

bnbplayer2个月前 (02-08)164
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技术栈...