NetBlog主题

uniapp tabBar使用icon图标
Web前端

uniapp tabBar使用icon图标

259

效果图使用步骤1、【阿里巴巴图标库】https://www.iconfont.cn/ 下载 图标字库,不会下载的可以看这个视频教程 https://www.bilibili.com/video/BV1F64y1b7nv2、将下载好的图标字库放在static下3、在app.vue引入style/*每个页面公共css */@import url(static/icon/iconfont.…

Vue3 Pinia的作用和使用
Web前端

Vue3 Pinia的作用和使用

280

Pinia作用类似于C#的一个类,里面可以放字段属性,方法使用步骤1、安装依赖 npm i pinia2、创建/store/UserInfo.tsimport { defineStore } from piniaexport const useUserInfoStore = defineStore(UserInfo, { state: () = { return { //字段属性 age: …

Vue3 axios get,post请求携带token
Web前端

Vue3 axios get,post请求携带token

342

安装axios依赖 npm i axiosget 和post 带token请求代码 import axios from axios//get请求 注意token前要添加 Bearer 并与空格隔开axios.get(http://localhost:5005/api/sysMenu/loginMenuTree, { headers: { Authorization: "Bearer eyJhbGciOiJIU…

Vue3 具名插槽的使用
Web前端

Vue3 具名插槽的使用

235

组件App.vuetemplate childd template v-slot:s2 !-- 显示到插槽名为s2里面 -- p性名:luoFenMing/p p性别:男/p p年龄:18/p /template template #s1 !-- 显示到插槽名为s1里面 v-slot:也可以用【#】代…

Vue3 默认插槽的使用
Web前端

Vue3 默认插槽的使用

200

组件App.vuetemplate childd title="组件标题" !-- 组件标签里面的html内容显示到默认插槽 -- p性名:luoFenMing/p p性别:男/p p年龄:18/p /childd/templatescript setup lang="ts"import childd from @/components/Child.v…

Vue3 组件通信$refs,$parent
Web前端

Vue3 组件通信$refs,$parent

196

父组件与子组件通讯父组件App.vuetemplate div p{{ money }}/p button @click="updateUserInfo"修改/button /div clildd ref="c1" / clildd2 ref="c2" //templatescript setup lang="ts"import { ref } from vueimport clildd from…

Vue3  路由的基本使用(router)
Web前端

Vue3 路由的基本使用(router)

144

路由:简单的来说就是在浏览器输入Url地址回车之后,会显示该Url页面的内容,效果如下App.vue组件代码(程序入口的组件)template div class="navigate" RouterLink to="/Home" active-class="active"首页/RouterLink RouterLink to="/about" active-class="a…

Vue3 自定义UI组件(Input)
Web前端

Vue3 自定义UI组件(Input)

205

效果如下自定义UI组件LuoFenMingInput.vue代码template input type="text" :value="modelValue" @input="emit(update:modelValue,$event.target.value)" /template script setup name="LuoFenMingInput"import { defineProps,defineEmits } from…

Vue3 组件之间事件传递(mitt)
Web前端

Vue3 组件之间事件传递(mitt)

233

组件之间传统的事件传递,两个组件之间要关联,很不好用。在这里我们用到的是mitt。相当把事件放到了一个公共的地方。任何组件直接拿来调用即可。用起来非常方便。1、先安装mitt npm i mitt2、创建/utils/emitter.ts代码如下//引入mittimport mitt from mitt//调用 mitt 得…