![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
guorui_cara
这个作者很懒,什么都没留下…
展开
-
vue原型挂载组件
html页面<template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div></template><script> export default { }</script><style lang="scss" scoped>原创 2021-02-25 14:47:27 · 1167 阅读 · 0 评论 -
vue-skeleton-webpack-plugin搭建骨架屏,以及nprogress优化用户体验
最近在优化手里面项目,发现项目首页加载实在很慢,第一次加载白屏显示时间很长,用户体验极差,所以自己鼓捣加个骨架屏和加载滚动进度条试试。使用vue-skeleton-webpack-plugin、nprogress搭建骨架屏首先安装插件npm install --save nprogressnpm i vue-skeleton-webpack-plugin对于nprogress其他使用属性,可以在链接查看;在项目中使用方法,在route里面加入钩子函数或者在main.js也可以,这样在页面原创 2020-12-18 20:43:53 · 649 阅读 · 1 评论 -
Vue移动端输入表单键盘恢复后,页面被抬起无法返回或者遮罩层里面事件全部失效
我遇到的这个问题主要存在2个不同的情景,第一种当可输入表单与当前页面在同一层级;第二种是当前页面,输入表单在弹框的里面,键盘抬起时父容器被抬起,弹框内所有事件无法使用。第一种情况下:处于同层面;<input type="text" v-model="phoneUserInfo.name" @blur="gotoView" @focus="gotoView"/>g...原创 2020-01-09 20:06:23 · 347 阅读 · 0 评论 -
vue实现自适应折叠动画
简单明了上代码:使用的是函数组件(新建js,直接当做组件引用就好了)const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'const Transition = { 'before-enter' (el) { ...原创 2019-12-27 16:03:03 · 971 阅读 · 0 评论 -
在Vue项目中使用npm安装bootstrap以及jquery
经过我好多次的查询和实验,总结了一下在vue项目中使用bootstrap框架,npm安装注意. bootstrap中js插件依赖于jquery,所以在这之前必须安装jquery。jquery安装1、在package.json中添加一行代码:“jquery”: “^2.2.3”"dependencies": { "element-ui": "^2.0.5", "vue": "^2.5.2原创 2017-11-23 16:33:08 · 30751 阅读 · 4 评论 -
Vue.set全局操作作用
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。我们可以通过原生js对数据进行操作,但是当只通过索引操作数组时,就展现出vue.set的价值了。接下来看一下代码显示:<div id="app"> <p>{{name}}-{{age}}</p> <ul> <li v-for="(item,...原创 2019-01-15 16:28:51 · 1096 阅读 · 0 评论