VUE
关注
分享
扫一扫
VUE笔记
Don_ixu
前端小菜鸡,努力学习ing,22年校招加油!!!
展开
-
vue项目打包以及优化
vue项目的打包上线及优化项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理vue项目的打包脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包打开终端，切换到项目根目录输入命令：npm run build会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NISVuSR5-1627475455629)(img\01-打包后的文件目录原创 2021-07-28 20:31:11 · 2133 阅读 · 8 评论 -
element-ui Navbar使用小结
左侧导航NavMenu 导航菜单el-menu:整体菜单组件unique-opened：是否在同一时间只保留一个菜单项的展开router：是否使用 vue-router 的模式，启用该模式会在激活导航时以el-menu-item的 index 作为 path 进行路由跳转default-active：默认被展开的菜单项，它 的值为el-menu-item的indexdefault-openeds:当前需要展开的菜单项el-submenu：一级菜单项index:当前一级菜单项的唯一原创 2021-07-27 11:13:31 · 1487 阅读 · 0 评论 -
js文件内使用第三方库组件
原创 2021-07-27 10:25:17 · 893 阅读 · 0 评论 -
登陆后跳转的注意点!!!!
一定要记得先存储token再进行跳转!!!错误示范this.$router.push({ name: 'index' })localStorage.setItem('houtai_token',res.data.data.token)报错提示登陆时会报错,而且需要点击两次登陆才能登陆成功跳转到首页正确代码// 一定要记得先存储token再进行跳转!!!!!!!localStorage.setItem('houtai_token',res.data.data.token)原创 2021-07-27 10:22:10 · 156 阅读 · 0 评论 -
跳转重复路由的处理
错误NavigationDuplicated: Avoided redundant navigation to current location: "/comment/108".解决方法// 跳转重复路由处理this.$router.push({ path: `/comment/${this.post.id}` }).catch(() => {});原创 2021-07-23 17:54:32 · 264 阅读 · 0 评论 -
组件递归小结
组件递归：组件内部调用组件自身细节：不能在当前组件中使用import+components的方式引入自身并注册来使用Unknown custom element: <hmCommentItem> - did you register the component correctly? For recursive components, make sure to provide the "name" option.翻译：未知的用户元素hmCommentItem，你有没有正确的注册这个组件.原创 2021-07-23 15:37:33 · 1005 阅读 · 0 评论 -
导航守卫小结
导航守卫在我们的项目中，并不是所有的页面都能自由的跳转，有些页面需要登陆之后再跳转现在的问题：不登陆也能进入到个人中心页–不合理解决：添加导航守卫，判断用户是否登陆，如果登陆则进行跳转，否则重定向到登陆页在src/router/index.js中添加守卫，限制用户的跳转登陆成功之后存储token到本地存储if (res.data.message === "登录成功") { // 在跳转之后，存储token到本地存储 localStorage.setItem('heima_65原创 2021-07-22 11:45:32 · 117 阅读 · 0 评论 -
登陆后页面回跳功能实现
页面回跳在文章详情页，如果没有登陆，则应该通过拦截器重定向到登陆页但是有一个需求：登陆成功之后，仍然回到当前文章详情页解决：1.当重定向到登陆页的时候，将当前文章详情页的地址做为参数传递给登陆页2.在登陆成功之后，根据之前传递的地址进行回跳将当前文章详情页的地址做为参数传递给登陆页// src/utils/request.js 添加响应拦截器 核心代码是第7行axios.interceptors.response.use(function (response) {// 响应成功 co原创 2021-07-21 18:43:52 · 515 阅读 · 0 评论 -
Object.defineProperty(Vue2的响应式原理)
代码案例let data = {};let name = "小林";Object.defineProperty(data, "name", { get() { console.log("获取data.name时调用了get方法"); return name; }, // 这里接受一个参数,新赋值的值 set(newValue) { // 这里就可以写重新渲染的代码 console.log(`设置data.name为${newValue}时调用了se原创 2021-06-09 15:57:39 · 135 阅读 · 0 评论 -
Vue v-on,data以及methods中的this小结
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2021-06-10 22:38:20 · 256 阅读 · 0 评论 -
Proxy&Reflect(vue3.0响应式数据劫持原理)
let arr = [1,2,3]let proxy = new Proxy(arr,{ // 获取值时触发 get(target,key,receiver){ console.log('获取值'); // Reflect和Proxy都是成对出现的 (Reflect一般被叫做反射) // const res = Reflect.get(target,key,receiver) 这句话其实就相当于 target[key] //原创 2021-06-15 19:35:22 · 389 阅读 · 0 评论