“VUE3快速入门（4）——Setup语法糖与数据绑定” 的相关文章
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快速入门（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快速入门（5）——响应式数据
本节讲述了如何用ref和reactive实现基本数据类型和对象数据类型的响应式更新，同时讲述了在何种情况下会失去响应式功能以及对应的解决办法。 1. 什么是响应式响应式是指当变量的值变化后，<template>的内容同步自动更新。Vue2的选项式API中的data默认为响应式，但Vue3的组合式API为非响应式，即无法自动更新。因此需要用ref和reactive进行处理。 2.基本数据类型的响应式处理基本数据类型是指字符串和数字，这种类型只能用ref处理。 2.1 表单输入的响应式更新本节实现HTML标签实时显示表单内容的功能。 在上一节的基础上增加一个HTML元素，用来实时显示表单的输入值： <h2>input框的内容： {{ input_content }}</h2> <input v-model="input_content"/> 修改<script>代码： import { ref } from 'vue' let input_content = ref(''); 对比上一节代码(2.2小节)，input_content此时通过ref进行了定义。执行代码，当在input框内输入数据时，<h2>标签的内容将同步更新，此时的input_content为响应式数据。 2.2 代码操作的响应式更新本节实现按钮单击实时更改HTML标签内容的功能。 新增按钮并绑定事件： <button @click="add()">+1</button> 事件处理方法： function add() { input_content.value += 1;//注意：必须通过“ref的实例名.value.字段”的形式更新 } 单击按钮，页面上的数字加1，即通过代码实现了页面的更新。 3. 对象数据类型的响应式处理对象数据类的响应式处理既可以用ref又可以用reactive。 本节将实现通过输入框更改对象的一个字段，并实时显示的功能。<template>部分代码如下： <h2>电话号码： {{ worker.tel }}</h2><!--注意此处对象实例.字段的写法，不受ref或reactive的影响--> <input v-model="tel"/> <button @click="changeTel(tel)">修改电话</button> 3.1 通过ref处理定义表单绑定的变量、事件方法，并通过ref定义一个对象： import { ref } from 'vue' let worker = ref({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); let tel = ""; function changeTel(content: any): any { worker.value.tel = content;//同样通过“ref的实例名.value.字段”的形式更新 } 输入新的号码并点击按钮，将更新worker对象的tel字段，且在页面同步更新。 3.2 通过reactive处理修改代码如下： import { reactive } from 'vue' let worker = reactive({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); let tel = ""; function changeTel(content: any): any { worker.tel = content;//注意此处与ref的区别，不再需要.value } 4. 丢失响应功能的情况当整体替换对象或解构对象时，可能会丢失响应式功能。 4.1 对象类型的字段批量更新很多时候希望将服务器返回的数据直接赋值给对象，从而更新多个的字段。在JS/TS里，服务器返回的数据被视为一个新的对象，如果采用直接赋值的方式会失去响应式功能。 //之前定义的对象 let worker = reactive({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON，转换成对象 /* 假设ajax_obj对象如下： { name: "Alice", age: 14, mail: "1234*******@qq.com", tel: "132****777" } */ worker = reactive(ajax_obj)//尝试通过这样的方式更新多个字段的内容将会失去响应式功能。 } 4.1.1 逐字段赋值function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON，转换成对象 worker.name = ajax_obj.name; wroker.age = ajax_obj.age; //... } 这种方法适合字段较少的情况。 4.1.2 使用Object.assginObject.assgin的主要功能是对象合并，第一个参数是原始对象，后面的参数是要合并的多个对象。但使用Object.assgin在某些情况可能不适用。 function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON，转换成对象 worker = Object.assgin(worker, ajax_obj); } 4.1.3 使用ref将原始对象的定义改为ref即可。 //之前定义的对象 let worker = ref({ name: "Jesse", //... }); function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON，转换...
VUE3快速入门（6）——计算属性
本节讲述了Vue3的计算属性的用法。 1. 什么是计算属性计算属性用于对一些需要展示到模板上的数据进行处理，虽然用函数也能实现，但计算属性会自动缓存，只有值发生变化时才重新计算，加快运行效率。 2. 基本使用方法本节实现一个功能，将输入的电话号码隐去中间四位。 2.1 引用computedimport { computed } from 'vue'; 2.2 使用computed方法定义一个计算属性let encoded_tel = computed(() => { let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }); 其中worker是由ref定义的响应式数据，通过输入框修改电话号码并实时显示的方法参考上一节：VUE3快速入门（5）——响应式数据。 2.3 在模板中使用将上一节的模板变量改为： <h2>电话号码： {{ encoded_tel }}</h2> 这样，当输入电话号码并点击“修改”后，号码将隐去中间四位。 3. 计算属性的读写性如果要通过代码修改计算属性的值，则： function changeComputed() { encoded_tel.value = "..."; } 3.1 只读第二节定义计算属性的方式属于只读属性，采用上述方法修改计算属性的值会报错。 3.2 可读可写要修改计算属性的值，必须定义getter和setter： let encoded_tel = computed(() => { get(){ let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }, set(val){ //针对val的逻辑处理代码 } }); 4. 总结 计算属性与函数类似，但计算属性有缓存，如多次调用其值不变，则仅计算一次；计算属性如果要通过代码修改值，则必须定义getter和setter；对计算属性的value字段赋值，仅仅触发setter的调用，实际上并没有修改任何值，还需要在setter里面编写逻辑处理代码！...
发表评论
