“VUE3快速入门（6）——计算属性” 的相关文章
VUE3快速入门（4）——Setup语法糖与数据绑定
本文讲述了如何使用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快速入门（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快速入门（8）——属性
本文讲述了组件属性的实现方法，以及如何限制属性的数据类型。 1. 什么是组件的属性组件的属性是指可以由组件的调用者动态设置的参数，组件在运行时根据这些参数展现调用者需要的数据。组件的属性等同于HTML标签的属性。 2. 最简单的一个属性本节实现一个展现员工信息的列表，第一步先传入一个“department”属性用于显示员工所属的部门。 2.1 属性的定义定义属性： import { defineProps } from "vue";//引入defineProps，该函数属于宏函数，实际无需引入 let props = defineProps(["department"]);//声明department为一个属性 defineProps方法传入一个字符串数组，其内容是将要被设为属性的变量名称。该方法同时返回一个对象，该对象由传入该组件所有属性的名称和值组成。 模板部分： <template> <p>所属部门： {{ department }}</p> </template> 2.2 使用组件并设置属性<WorkerTable department="宣传科"></WorkerTable> 3. 强制类型限定接下来新增一个属性：data，该属性是描述员工信息的数组，用于表格展示。其中模板部分如下： <template> <h1>所属部门:{{ department }}</h1> <table id="main"> <thead> <tr> <th scope="col">员工号码</th> <th scope="col">姓名</th> <th scope="col">性别</th> <th scope="col">电话</th> </tr> </thead> <tbody> <tr v-for=" (item, index) in data" :key="item.id"> <th scope="col">{{ item.id }}</th> <td scope="col">{{ item.name }}</td> <td scope="col">{{ item.sex ? '男' : '女' }}</td> <td scope="col">{{ item.tel }}</td> </tr> </tbody> </table> </template> 根据模板的展示需求，员工信息需要包括ID、姓名、性别、电话等字段，如果上级组件传入的属性数据不符合员工字段的要求，则组件会出现显示异常。为避免这样的问题，需要检查属性数据的类型，当类型不符合要求时，禁止上级组件的属性赋值。 3.1 定义新类型利用TS的接口类，定义一个员工数据类型，并导出：（建议新建一个名为WorkerTable的文件夹，该文件夹包含一个子文件夹src，用于存放组件的辅助代码，而组件的入口文件则与src同级） //file：@/component/WorkerTable/src/IWorker.ts export interface IWorker{ // 序列号 id: number, // 姓名 name: string, // 性别 sex: boolean, // 电话(可选) tel?: string } export type IWorkerArray = IWorker[]; 该文件定义了一个员工类：IWorker以及它的数组类型：IWorkerArray。 3.2 类型检查修改组件TS代码： import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker"; defineProps<{department: string, data: IWorkerArray}>();//通过泛型进行类型检查并声明属性 上述代码有两个注意点： 引入类型需要使用type关键字通过泛型的方式进行类型检查时，所有属性均需进行类型检查（要么所有，要么都不） 3.3 属性赋值最后调用该组件的TS部分： import WorkerTable from '@/components/WorkerTable/WorkeTable.vue'; import { ref } from "vue"; let workers = ref([ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ]); 也可以向ref（reactive）传递泛型，在此处限定workers的类型： import { type IWorkerArray } from '@/components/WorkerTable/src/IWorker'; import { ref } from "vue"; let workers = ref<IWorkerArray>(...); 但由于WorkerTable组件已经进行了类型检查，因此上述代码的写法似乎没必要。 模板部分： <WorkerTable department="办公室" :data="workers"></WorkerTable> 注意： 当传入的属性不符合类型要求时，代码将无法运行，避免显示异常。属性的“：”表示后面的内容作为表达式解析，如果不加“：”，则将会把“worker...
VUE3快速入门（9）——插槽
插槽可以实现组件的样式由调用者决定的功能。本文讲述了默认插槽、具名插槽以及作用域插槽的三种使用方式。 1. 什么是插槽插槽是指组件的部分或全部HTML样式由调用者决定，即动态的Template。例如组件的列表有可能是无序列表、有序列表或图片列表，无法在设计组件时指定，在这种情况下需要使用插槽。 2. 默认插槽默认插槽类似HTML的嵌套标签。本节在上一节的基础上对员工列表组件进行改造(WorkerTableEx)，上一节组件的列表标题使用了<h1>标签，但调用者可能希望行换成其他的形式，这里使用默认插槽实现。 组件代码如下： <template> <slot></slot><!-- 使用默认插槽形成占位符 --> <table id="main"> <!-- 表格部分省略 --> </table> </template> 则调用该组件的代码为： <WorkerTableEx><h2>部门：办公室</h2></WorkerTableEx> <WorkerTableEx><p>部门：办公室</p></WorkerTableEx> <WorkerTableEx><img src="..."/></WorkerTableEx> 这样，表格的标题展示形式由调用者决定，它可以是头部标题、段落或者图片以及其他。 通过在<template>中使用<slot></slot>形成占位符，当调用者在组件标签中插入HTML片段或另一个组件时，VUE将会把插入的内容放到占位符中（有几个占位符就放几个）。 3. 具名插槽有时希望多个占位符展示的内容不一样，这种情况需要使用具名插槽。假如要求表格底部可以显示备注信息，这就需要与展示标题的插槽区分开来： <template> <slot name="title"></slot><!-- 使用具名插槽，标题显示部分 --> <table id="main"> <!-- 表格部分代码省略 --> </table> <slot name="description"></slot><!-- 使用具名插槽，备注显示部分 --> </template> 则调用该组件的代码为： <WorkerTableEx> <template v-slot:title><!-- 使用v-slot指令 --> <h3>部门：办公室</h3> </template> <template #description><!-- v-slot语法糖 --> <p>导出时间：2024年6月26日</p> </template> </WorkerTableEx> 提示： 使用v-slot指令可以指明内容放在组件的哪个插槽内，同时v-slot指令可以简写为“#”。v-slot指令只能用在<template>标签和组件标签上，不能用在HTML标签上，因此使用具名插槽必须把普通HTML代码用<template>标签包裹。由于使用了具名插槽，因此组件展示的内容顺序与调用者的编码顺序无关。 4. 作用域插槽有时会有这样的需求：数据由组件生成（如请求服务器得到后端数据），但展示形式却由调用者决定，这种情况需要使用作用域插槽。作用域插槽常见于UI框架。 继续改造WorkerTableEx组件，其中该组件仅提供数据（员工、部门及导出时间）以及头部、正文和注脚三个具名插槽： let ajax_data = ref( { workers: [ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ], department: "技术部", exp_t: "2024年6月27日20:22:37" });//实际开发从应从服务器获取 组件的模板部分： <template> <slot :title="ajax_data.title" name="header"></slot> <slot :workers="ajax_data.workers" name="content"></slot> <slot :exp_t="ajax_data.exp_t" name="footer"></slot> </template> 上述代码使用了具名作用域插槽，将ajax_data的title、workers和exp_t属性分别绑定到三个不同的具名插槽。 则调用者的代码为： <WorkerTableEx> <template #header="parame"> <h3>部门：{{ parame.title }}</h3> </template> <template #footer="parame"> <p>导出时间：{{ parame.exp_t }}</p> </template> <template #content="parame"> <table id="main"> <thead> <tr> <th scope="col">员工号码</th>...
发表评论
