vue
文章平均质量分 63
拾辞
这个作者很懒,什么都没留下…
展开
-
vue-router路由守卫以及鉴权
首先我们先了解路由守卫:路由守卫有点类似于ajax的请求拦截,就是请求发送之前先给你拦截住一些事情之后再去发送请求,同样这里的理由守卫意思差不多;简单理解为就是你进路由之前,首先把你拦住,对你进行检查;当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他钩子函数进行其他操作;vue-reuter提供了三大类钩子函数来实现路由守卫1.全局钩子函数(beforEach,afterEach)2.路由独享的钩子函数(beforeEnter)3.组件内的钩子函数(beforerouterEnter,befo原创 2021-06-06 18:44:56 · 6033 阅读 · 2 评论 -
vant按需引入
vant-ui有很多引入方式,推荐自动按需引入组件,这样有利于项目打包优化,减少项目体积流程:首先安装vantcnpm i vant --save安装babel-plugin-import 插件cnpm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。在.babelrc 中添加配置{“plugins”: [[“import”, {“libraryName”原创 2021-06-03 21:31:26 · 155 阅读 · 0 评论 -
去拿儿项目总结
准备vue-cli是Vue的脚手架工具,通过vue-cli,可以快速构建一个vue项目,并且vue-cli自带webpack的各种配置。//3.0 4.0版本npm install -g vue/clivue create project-name…//2.0版本在4.0版本下运行npm install -g @vue/cli-initvue init webpack project-name项目结构build:项目的webpack配置文件config:针对于开发环境和线上环境的配置文原创 2021-06-03 21:06:06 · 102 阅读 · 1 评论 -
vue keep-alive总结
keep-alive:keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transitio 相似,keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。常见的用法:// 组件export default { name: 'test-keep-alive', data () { return {原创 2021-06-02 07:53:40 · 140 阅读 · 0 评论 -
vue-router (两种路由模式、编程式/组件式、如何传参(优缺点))
路由原理两种模式1.路由就是用来解析URL实现不同页面之间的跳转hash模式hash模式:在浏览器中符号的“#”,以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。h原创 2021-05-23 19:42:53 · 747 阅读 · 4 评论 -
vuex(五大核心,高级用法—辅助函数,数据持久化)
我们来说说什么是vuex1.什么是vuexVuex 是一个专为Vuex.js应用程序开发的状态管理模式,他由五部分组成:分别是:state,actions,mutations,modulse,getters2.vuex的五大核心1.state:存放状态存放公共数据,是一个仓库,任何组件都可以调用里面的数据。使用:在state中直接声明数据即可。2. getters:vuex中的计算属性相当于组件中的计算属性,当state中的数据发生改变,getters中的数据也回跟着改变使用:在v原创 2021-05-23 19:15:01 · 328 阅读 · 2 评论 -
vue的生命周期函数
1.生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为八个阶段分别有:创建前/创建后创建前:beforeCreate() 表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化创建后:Created() 数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。挂载前/挂载后挂载前:beforeMount() vue 实例的 $el 和 data 都已初始原创 2021-05-20 16:35:25 · 85 阅读 · 1 评论 -
vue的组件通信(父传子,子传父,兄弟通信)
前言:首先我们得了解子组件,组件是页面的一部分,可以理解成为封装的html子组件和放在views底下的区别:页面在坑里加载,而子组件是页面的一部分方法一:父组件向子组件传值首先在使用子组件的标签上写一个 自定义属性 属性的值就是要传递的值到了子组件 用props接收 是一个数组,注意不要忘了加“”,props接收到的数据跟data 的用法是一样的我们来一个最简单的例子:父组件//父组件<template> <div class=""> <div:aaa原创 2021-05-20 15:42:10 · 131 阅读 · 1 评论