“VUE3快速入门（1）——搭建开发环境” 的相关文章
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里面编写逻辑处理代码！...
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...
关于“拓源纯净主题”引发的Undefined array key "pro" 的修复
本博客使用的是由拓源 推出的“纯净主题”。目前发现一个由于IP查询接口触发的问题，导致主题需要显示IP归属地的页面（如留言、评论页等）会出现如下错误： 经检查，该主题的 tpure_IP函数使用了一个“https://whois.pconline.com.cn/ipJson.jsp” 接口查询IP归属地，但该接口不稳定，时常返回空，所以触发了上述问题。修改方式如下： 1 定位到函数在该主题的安装目录下（位置：/zblog的安装目录/zb_users/theme/tpure）,打开includes.php 在编辑器中按“Ctrl+F”搜索函数：tpure_IP。找到如下代码： function tpure_IP($ip) { $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; } 2 更换查询接口，实现自己的解析方式在function tpure_IP($ip)代码前增加函数ip_parser($ip)，完整代码如下： function ip_query($ip) { $url = "https://opendata.baidu.com/api.php?query={$ip}&co=&resource_id=6006&oe=utf8";//此处使用百度API $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $ip_obj = json_decode($location, true); if(0 != count($ip_obj['data']) && array_key_exists('location', $ip_obj['data'][0])) return $ip_obj['data'][0]['location']; else return '未知'; } 注意，该代码一定要放在tpure_IP函数的前面。 3 注释原来的代码，调用新的函数将tpure_IP函数体内的代码全部用/**/注释，并在最后添加ip_query的调用代码，如下： function tpure_IP($ip) { /* $ch = curl_init(); $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $location = curl_exec($ch); curl_close($ch); $location = mb_convert_encoding($location, 'utf-8','GB2312'); $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1)); $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location))); parse_str($location,$ip_location); return $ip_location['pro']; */ return ip_query($ip); } 相当于不再使用原本的实现，而使用自己的实现，但函数名称不变，保存即可。有动手能力的大佬也可以将API换成其他的，但是解析代码也同样要换。 点击下列链接可以下载本人修改好的文件进行替换。请注意备份好源文件！！！include.php...
发表评论
