随笔分类 - Vue再出发
摘要：1、作用：定义响应式数据 2、语法 a、引用 import { ref } from 'vue'; b、创建 创建一个包含响应式数据的引用对象 let xx= ref(数据) c、JS操作 xx.value d、模板操作 {{xx}} 3、注意 数据可以是：基本类型，也可以是对象类型 基本类型需要.
阅读全文
摘要：1、setup是一个函数，注意有返回值 2、组件中所用到的：数据、方法等，均要配置在setup中 3、setup函数返回值(两种) a、返回对象，则对象中的属性、方法等在模板中可以直接使用 案例 <template> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2>
阅读全文
摘要：一、脚手架创建 vue create 项目名 二、vite创建 # 创建工程 npm init vite-app <project-name> cd <project-name> # 安装依赖 npm install # 运行 npm run dev
阅读全文
摘要：一、移动端 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、按需引入
阅读全文
摘要：一、概念 1、对与url来说 # 后面的内容就是hash值 2、hash值不包含在http请求中，即：hsah值不会带给服务器 3、hash模式 a、地址不美观带有# b、地址可能会被校验不合法 c、兼容性好 4、histroy模式 a、地址干净、整洁 b、兼容性比hash模式差 c、部署需要解决服
阅读全文
摘要：1、顺序 2、位置 组件内部 3、语法 beforeRouteEnter 通过路由规则，进入该组件时被调佣 beforeRouteLeave通过路由规则，离开该组件时被调用 注意：通过组件引入不被调用 beforeRouteEnter (to, from, next) { // ... consol
阅读全文
摘要：1、位置 src/router/index.js 写在路由中 2、顺序 在全局 前置守卫 执行后执行 2、语法 { path:'news', component: NewsData, meta:{isAuth:true, title:'新闻'}, beforeEnter: (to, from, ne
阅读全文
摘要：一、位置 src/router/index.js const router = new VueRouter({ routes:[ ] }) // 这个地方写全局前置路由守卫或 全局后置路由守卫 export default router 一、全局前置路由守卫 1、时间：初始化时被调用，每次切换前被调
阅读全文
摘要：1、作用 路由独有的两个生命周期函数，用于捕获路由组件的激活状态，激活路由调用 2、功能, 只有 组件被 keep-alive 包裹时才能生效 activated路由组件被激活时调用 activated(){} deactivated路由组件失活时调用 deactivated(){}
阅读全文
摘要：路由切换，组件自动销毁，想要保留A组件的数据，需要确认A组件路由所在的组件，在该组件中包<router-view> <keep-alive include="NewsData"> <router-view></router-view> </keep-alive> include=组件名称 不写inc
阅读全文
摘要：一、作用 不借助<router-link>实现路由跳转 二、路由 (push replace) 借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似 1、push 触发 <button @click="pushShow(m)">
阅读全文
摘要：1、作用 控制路由跳转时操作浏览器历史记录的模式 2、两种 push：追加历史记录 replace：替换历史记录 默认为 push 3、设置 添加 replace 属性 <router-link replace class="list-group-item" active-class="active
阅读全文
摘要：1、作用 让路由组件便于接受参数 2、写法(三种) src/router/index.js a、简单 值为对象，通过props传递给组件，组件需要接受 { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: De
阅读全文
摘要：一、传递参数 1、路由(占位符) src/router/index.js children:[ { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: DetailData }, ] 2、传递(对象) 注意：pa
阅读全文
摘要：1、作用 简化多级路由 2、设置 src/router/index.js 在路由中添加 name 关键字 children:[ { name:'detail', path:'detail', component: DetailData }, ] 3、使用，配合传递参数，或者单个name关键字 to要
阅读全文
摘要：一、传递参数 1、固定参数 <router-link to="/home/message/detail?name=jojo&age=8">{{ m.title }}</router-link> 2、变化参数(对象写法) 关键字：path 路径(完整)，query: 对象 <router-link :
阅读全文
摘要：一、配置路由 关键字 children 注意 子路由 path 不加斜杠 src/router/index.js export default new VueRouter({ routes:[ { // path 是路径，component是组件 path: '/about', component:
阅读全文
摘要：1、安装vue-router //Vue2 npm i vue-router@3 //vue3 npm i vue-router 2、使用VueRouter main.js // 引入VueRouter import VueRouter from "vue-router"; //使用 Vue.use
阅读全文
摘要：1、在pbulic文件夹中创建css文件夹，并存入bootstrap.css文件 2、在index.html文件中引入 <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
阅读全文
摘要：1、创建Js文件 每个组件单独一个js文件，在src/sore中 2、每个组件文件中，默认暴露，actions mutations state gettters namespaced：true export default { namespaced: true, actions:{}, mutati
阅读全文
浙公网安备 33010602011771号