“VUE3快速入门（6）——计算属性” 的相关文章
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快速入门（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快速入门（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>...
关于“拓源纯净主题”引发的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...
VUE3快速入门（10）——路由的基础使用
1. 什么是路由路由是指根据不同的URL加载不同的组件，其典型应用是后台页面，点击不同的菜单显示不同的页面。通过使用路由，能实现SPA页面、无刷新加载、部分页面加载的功能，是VUE最为典型的一种功能。 2. 准备工作2.1 搭建导航区与展示区框架本文实现一个功能：导航有三个按钮，分别是“首页”、“新闻”、“关于”。点击三个按钮在展示区显示不同的页面。App.vue代码如下： <template> <!--这是导航区--> <nav> <ol> <li><a href="#">首页</a></li> <li><a>新闻</a></li> <li><a>关于</a></li> </ol> </nav> <!--这是展示区--> <div id="content"></div> </template> 2.2 创建路由视图页在源码目录下新建views目录，用于单独存放路由视图组件，目录内建立Home.vue、News.vue、About.vue，分别对应“首页”、“新闻”、“关于”的具体内容。具体代码略。 2.3 安装路由npm install vue-router 上述代码将会自动安装VUE3的路由组件。 3. 使用路由3.1 定义路由（History模式）在源码目录新建目录router，再创建index.ts文件作为路由定义文件。首先引用路由以及需要使用的路由视图： import { createRouter, createWebHistory } from 'vue-router' //三个准备好的路由视图 import Home from '@/views/Home.vue' import News from '@/views/News.vue' import About from '@/views/About.vue' 其次定义路由，关键是路径与路由视图的对应关系： const router = createRouter({ //路由模式 history: createWebHistory(), //路由映射关系 routes: [ { path: '/home',//路径 component: Home,//加载的组件 }, { path: '/news', component: News, }, { path: '/about', component: About, } ], }) createRouter函数中传入对象的history属性用于指定路由模式为“WebHistory”模式，routes用于指明路径与页面的映射关系，类型为键值对数组。注意：创建路由时，必须指定使用哪一种路由模式。 记得将定义好的路由暴露出去 export default router 3.2 加载路由在main.ts入口文件中，引用定义好的路由，在原始代码基础上新增如下代码： import router from '@/router/index' app.use(router)//注意该代码放在const app = createApp(App)之后 3.3 处理视图首先添加引用：import { RouterLink, RouterView } from ‘vue-router’其次将App.vue的a标签替换为RouterLink组件： <li><RouterLink to="/home">首页</RouterLink></li> <li><RouterLink to="/news">新闻</RouterLink></li> <li><RouterLink to="/about">关于</RouterLink></li> 最后在原本要展示内容的位置写上RouterView标签：<RouterView></RouterView> 最终效果：在页面上点击三个按钮，可以看到浏览器地址的路径在变化，同时页面展示区显示了三个按钮对应的页面。 4. 更换路由模式（Hash模式）在上述示例代码中使用了History模式，现在替换为Hash模式。修改路由定义文件@/router/index.js更改引用： import { createRouter, createWebHashHistory } from 'vue-router' //... 更改创建路由的代码： const router = createRouter({ history: createWebHashHistory(),//此处修改为了createWebHashHistory //... }) 此时浏览器中出现了一个“/#/”部分。 5. RouterLink组件“to”属性的两种写法5.1 字符串写法见前文。 5.2 对象写法5.2.1 对象的路径属性代码如下： <li><RouterLink :to="{path:'/home'}">首页</RouterLink></li> <li><RouterLink :to="{path:'/news'}">新闻</RouterLink></li> <li><RouterLink :to="{path:'/about}">关于</RouterLink></li> 该写法传入了一个包含path属性的对象。 5.2.1 对象的名字属性（命名路由）修改路由定义文件，增加name属性： //@/router/index.ts const router = createRouter({ history: createWebHashHistory(), routes: [ { name: 'home', path: '/home', component: Home, } //... ], }) 将对象写法的path属性改为name即可： <li><Rout...
VUE3快速入门（11）——路由的嵌套与传参
1. 嵌套路由1.1 什么是嵌套路由嵌套路由是指一个路由视图中又包含一个路由视图，通常用于多级分类的SPA。比如一个新闻SPA，分为板块与列表二级。单击不同的板块出现不同的文章列表，再点击列表则出现新闻正文。本文基于上一节内容增加新闻列表和新闻详情的展示功能。 1.2 创建显示新闻详情的视图组件在“@/views/”路径下，新增一个Content.vue组件，HTML部分如下： <template> <div id="detail"> <h2>新闻标题</h2> <p>这是新闻的具体内容</p> </div> </template> 1.2 定义新闻数据修改上一节的News.vue代码的ts部分，增加新闻数据： <script lang="ts" name="News" setup> import { ref } from 'vue'; const news_data = ref([ { id: 1, title: '新闻1', content: '新闻内容1' }, { id: 2, title: '新闻2', content: '新闻内容2' }, { id: 3, title: '新闻3', content: '新闻内容3' }, { id: 4, title: '新闻4', content: '新闻内容4' } ]); </script> 1.3 新增子路由定义在路由定义文件的新闻路径下增加一个子路由： import Content from '@/views/Content.vue'//新增引入 const router = createRouter({ history: createWebHashHistory(), routes: [ //... { name: 'news', path: '/news', component: News, //增加children属性，注意为数组 children: [ { name: 'content', path: 'content',//注意：子路由无需再用“/” component: Content, }], }, //... ], }) 1.4 修改新闻列表视图修改News.vue的HTML部分如下： <template> <h1>新闻列表</h1> <div id="warpper"> <!-- 左侧新闻列表 ---> <div id="list"> <ul> <li v-for="item in news_data" :key="item.id"> <p><RouterLink :to='{path: "/news/content"}'>{{ item.title }}</RouterLink></p> </li> </ul> </div> <!-- 右侧新闻内容 --> <div id="content"> <RouterView></RouterView> </div> </div> </template> 注意二级路由的写法。 修改完成后，可以在新闻导航内看到左侧的新闻列表，点击链接在右侧展示的新闻内容。 2. 路由传参上述代码中点击每个新闻链接展示的内容都一样，现在需要根据链接展示不同的新闻，该功能需要用路由传参来实现。 2.1 Query传参路由定义文件见前文。 2.1.1 直接字符串拼接（不推荐）修改New.vue的RouterLink组件调用代码： <p> <RouterLink :to='`/news/content?title=${ item.title }&content=${ item.content }`'>{{ item.title }}</RouterLink> </p> 注意VUE的字符串模板语法：`…${变量名1}…${变量名2}…`。修改Content.vue的代码，取参数：ts部分： import { useRoute } from 'vue-router'//引入useRoute import { toRefs } from 'vue'//响应式 const route = useRoute() const { query } = toRefs(route)//从useRoute中解构query属性，该属性保存了传递的参数。 html部分： <template> <div id="detail"> <!-- 从query属性获取title参数--> <h2>{{ query.title }}</h2> <!-- 从query属性获取content参数--> <p>{{ query.content }}</p> </div> </template> 注意：由于是直接把传递的参数进行动态显示，所以在解构时需要转换为响应式类型。或者不解构，则写法为： <...
发表评论
