市丸银

2025年1月9日

摘要： 1、作用：定义响应式数据 2、语法 a、引用 import { ref } from 'vue'; b、创建创建一个包含响应式数据的引用对象 let xx= ref(数据) c、JS操作 xx.value d、模板操作 {{xx}} 3、注意数据可以是：基本类型，也可以是对象类型基本类型需要. 阅读全文

posted @ 2025-01-09 11:58 市丸银阅读(52) 评论(0) 推荐(0)

Vue3 setup

摘要： 1、setup是一个函数，注意有返回值 2、组件中所用到的：数据、方法等，均要配置在setup中 3、setup函数返回值(两种) a、返回对象，则对象中的属性、方法等在模板中可以直接使用案例 <template> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> 阅读全文

posted @ 2025-01-09 11:20 市丸银阅读(49) 评论(0) 推荐(0)

Vue3 创建工程

摘要：一、脚手架创建 vue create 项目名二、vite创建 # 创建工程 npm init vite-app <project-name> cd <project-name> # 安装依赖 npm install # 运行 npm run dev 阅读全文

posted @ 2025-01-09 09:38 市丸银阅读(34) 评论(0) 推荐(0)

Vue UI组件库

摘要：一、移动端 1、nutui 2、Vant 3、Cube UI 4、Mint UI 二、PC端 1、Element UI https://element.eleme.cn/#/zh-CN 2、IView UI 3、Ant Design of Vue 三、Element UI 1、全局引入 2、按需引入阅读全文

posted @ 2025-01-09 09:05 市丸银阅读(83) 评论(0) 推荐(0)

2025年1月8日

Vue 路由器工作的两种模式 hash history

摘要：一、概念 1、对与url来说 # 后面的内容就是hash值 2、hash值不包含在http请求中，即：hsah值不会带给服务器 3、hash模式 a、地址不美观带有# b、地址可能会被校验不合法 c、兼容性好 4、histroy模式 a、地址干净、整洁 b、兼容性比hash模式差 c、部署需要解决服阅读全文

posted @ 2025-01-08 23:30 市丸银阅读(71) 评论(0) 推荐(0)

Vue 组件内守卫

摘要： 1、顺序 2、位置组件内部 3、语法 beforeRouteEnter 通过路由规则，进入该组件时被调佣 beforeRouteLeave通过路由规则，离开该组件时被调用注意：通过组件引入不被调用 beforeRouteEnter (to, from, next) { // ... consol 阅读全文

posted @ 2025-01-08 22:51 市丸银阅读(29) 评论(0) 推荐(0)

Vue 独享路由守卫

摘要： 1、位置 src/router/index.js 写在路由中 2、顺序在全局前置守卫执行后执行 2、语法 { path:'news', component: NewsData, meta:{isAuth:true, title:'新闻'}, beforeEnter: (to, from, ne 阅读全文

posted @ 2025-01-08 22:35 市丸银阅读(32) 评论(0) 推荐(0)

Vue 全局前置路由守卫全局后置路由守卫

摘要：一、位置 src/router/index.js const router = new VueRouter({ routes:[ ] }) // 这个地方写全局前置路由守卫或全局后置路由守卫 export default router 一、全局前置路由守卫 1、时间：初始化时被调用，每次切换前被调阅读全文

posted @ 2025-01-08 22:17 市丸银阅读(92) 评论(0) 推荐(0)

Vue 路由两个生命周期钩子activated deactivated

摘要： 1、作用路由独有的两个生命周期函数，用于捕获路由组件的激活状态，激活路由调用 2、功能, 只有组件被 keep-alive 包裹时才能生效 activated路由组件被激活时调用 activated(){} deactivated路由组件失活时调用 deactivated(){} 阅读全文

posted @ 2025-01-08 19:59 市丸银阅读(53) 评论(0) 推荐(0)

Vue 路由缓存路由组件

摘要：路由切换，组件自动销毁，想要保留A组件的数据，需要确认A组件路由所在的组件，在该组件中包<router-view> <keep-alive include="NewsData"> <router-view></router-view> </keep-alive> include=组件名称不写inc 阅读全文

posted @ 2025-01-08 18:54 市丸银阅读(30) 评论(0) 推荐(0)

知行合一

公告