Vue
文章平均质量分 92
拾叶V
这个作者很懒,什么都没留下…
展开
-
Vue中如何使用keep-alive组件以及配合动态组件使用
什么是keep-alivekeep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。简单的来说,在点击切换不同组件的时候,为了降低消耗,就将包裹的组件缓存起来。keep-alive组件上的三个属性include:名称匹配的组件会被缓存exclude:任何名称匹配的组件都不会被缓存max: 最...原创 2020-04-19 22:36:27 · 652 阅读 · 0 评论 -
权限模块
实现思路在登录时通过后台得到一组数字字符串 例如:“0,1,2,3,4,5”数字越多说明权限越高。然后存入本地与vuex中在一些页面中通过存入本地的信息判断是否有权限访问。在路由拦截中,判断是否有权访问,如果没有访问权,就跳转页面到403页面login中 // 从后台得到登录者的position,有哪些权限 let position = '0,1' ...原创 2020-04-11 23:26:59 · 143 阅读 · 0 评论 -
面试题总结
JS部分js怎么创建私有变量JS没有私有属性的概念;所有的属性都是公用的;私有变量的概念:在任何函数中定义的变量,都是私有变量,因为不能在函数外部访问这些变量;私有变量:包括函数的参数/局部变量和函数内部定义的其他函数;特权使用:内部创建一个必报,必报可以直接访问私有变量;因此创建用于访问私有变量的公用方法,称为特权方法可以通过构造方法传参来访问私有变量,这种方法的缺点是会为每一个实...原创 2020-04-09 14:11:04 · 323 阅读 · 0 评论 -
Vue中使用插件vue-cropper在上传图片时裁剪以及如何在裁剪时预览
GitHub连接配合element的上传图片进行剪切 <el-upload class="upload-demo" action drag :auto-upload="false" :show-file-list="false" :on-change="handle...原创 2020-03-30 20:10:12 · 2390 阅读 · 0 评论 -
Vue中具名插槽与作用域插槽
具名插槽v-slot: 后面跟着插槽的名,template回到指定的位置header插槽有个默认的如果不传也会有 <Test_a> <template v-slot:footer> <div> 下面 </div> </template> ...原创 2020-03-27 21:16:58 · 538 阅读 · 0 评论 -
snyc修饰符的使用
一般情况下,我们都是如果需要对prop进行修改都是通过双向绑定来实现的,但是在维护上造成问题,推荐使用update:myPropName 的模式触发事件代替。Vue文档连接父组件中传入一个值<Bread :title.sync="doc.title" ></Bread>子组件中HTML 中<input type="text" v-model="n...原创 2020-03-25 23:06:27 · 550 阅读 · 0 评论 -
手写vue脚手架中路由跳转与数据请求时的进度条实现
因为我的项目是使用的elements写的没有iview组件中有加载进度条,不可能为了一个需求下另一个包将进度条的div放在APP.vue中在template中最上面<div id="progress_bar"></div>css样式 动画#progress_bar { width: 100vw; height: 5px; backgro...原创 2020-03-25 16:33:00 · 387 阅读 · 0 评论 -
Vue脚手架通过vuex切换不同组件的背景颜色
这个项目的需求是在头部组件中可以切换头部导航与侧栏组件的背景颜色我是利用element组件进行项目编写的头部导航与侧栏为两个兄弟同级组件 用 props 与emit用不了 所以使用vuex定义变量在vuex中定义一个默认的背景颜色变量以及mutation中换色的方法state:{ bg:'#545c64' }, mutations:{ ...原创 2020-03-22 15:14:30 · 626 阅读 · 0 评论 -
如何在另一个组件中控制Element组件侧栏的展开收起 以及如何解决切换时产生页面布局的影响
这个项目的需求是头部导航栏的组件中控制侧栏的展开收起 并且需要页面中的内容保持在满屏100vw先去element中将组件建好,引入组件在页面中显示element导航栏连接首先根据文档得到控制展开和收起的参数是collapse 需要在mode 为 vertical 时可用 就是侧栏使用在el-menu 标签中加入collapse 为true 但是为了能够控制展开和收起 需要定义一个变...原创 2020-03-22 11:29:52 · 1337 阅读 · 1 评论 -
vue脚手架中如何自定义代码片段
进入设置 => 用户代码片段 => 找到vue.json 文件 => 替换内部文件 "zz":{ //自定义输出的快捷方式 "prefix": "zz", "body": [ "<template>\n<div>\n</div>\n</template>\n\n<script>\nexpor...原创 2020-03-19 17:34:22 · 349 阅读 · 0 评论 -
Mock.js常用的随机数据以及vue脚手架中如何使用
普通js中如何使用直接引用在线的mock连接let user = Mock.mock({ "list|10": [{ "id|+1": 1001, //id会+1 "gender|1": [1, 2], //随机生成1或者2 "price": "@natural(2,8...原创 2020-03-14 22:19:50 · 160 阅读 · 0 评论 -
在vue中使用vuex
什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说就是集中管理数据的地方,所有的组件都能够使用同一组数据什么时候该使用vuexvuex确实带来了很大的便捷可以帮助我们管理共享状态,并附带了更多的概念和框架。个人觉得有些不需要共享的数据就不要放在里面集中管理...原创 2020-03-13 13:41:44 · 117 阅读 · 0 评论 -
Vue脚手架中组件传参(父子组件 祖孙组件 同级兄弟组件)
父往子用props子往父用$emitv-model 父子组件之间的双向绑定//父级将值传给子级<Later v-model="twocount"></Later>//子组件接收一个valueprops:["value"],//不要修改props里面的值,在data里定义一个变量,将接收的值付给新变量data() { return { ...原创 2020-03-11 20:15:52 · 1051 阅读 · 0 评论 -
前端购物车的删除、商品数量加减
商品按钮的加减 <!-- 到一时禁用这个按钮 --> <button :disabled="itmr.count===1" @click="itmr.count--">-</button> <input @keydown.enter="onblur(itmr,$event)" @b...原创 2020-03-11 11:08:16 · 1752 阅读 · 1 评论 -
在vue中使用 sass预处理器(入门篇)
先下载包,两个包一起下,分开下都行cnpm install -D sass-loader node-sass//scoped 加上后此组件的 CSS 只作用于当前组件中的元素//如何实现: 是通过给不同组件里的div加上不同的属性//加上lang="scss" <style lang='scss' scoped>//定义变量这样组件里需要用到的一样的属性就可以使用...原创 2020-03-10 17:46:17 · 658 阅读 · 0 评论 -
Vue脚手架中配置别名
设置别名后可以很便捷的访问到组件的路径调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象也可以通过链式操作Vue 文档连接 webpack 文档连接let path = require('path')function resolve(url) { return path.resolve(...原创 2020-03-09 20:01:08 · 856 阅读 · 0 评论 -
在Vue脚手架中三分钟快速上手Swiper(轮播图)插件
快速上手Swiper插件先下载插件npm install vue-awesome-swiper --save引入插件全局引用 所有的组件都能使用import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/cs...原创 2020-03-08 20:10:36 · 969 阅读 · 3 评论 -
vue脚手架中路由传参、嵌套路由、路由拦截
配置路由为避免 main.js 文件复杂,将路由配置提取到 router/index.js 中先安装包 npm或者yarn都行npm install vue-routeryarn add vue-router在src目录下新建一个router文件夹,在文件夹里新建一个js文件引入模块 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能im...原创 2020-03-08 16:16:02 · 344 阅读 · 0 评论 -
在vue中如何优雅的使用axios请求以及请求拦截的使用(自定义插件plugin中使用mixin封装axios、在api中)
mixin混入来封装axios请求我们通过mixin来封装axios请求这样每一个组件直接通过混入来进行axios请求。不必每次需要时都要import引入一次首先需要下载axios的包 //用npm、cnpm或者yarn都行 npm install axios yarn add axios在src里新建一个mixins文件夹,在新文件夹里新建一个js文件...原创 2020-03-08 11:59:12 · 1012 阅读 · 0 评论