![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
废柴前端
技术牛养成中
展开
-
Vue3 setup 在渲染函数中通过ref访问Dom元素
Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时,如果需要使用ref, 和 vue2.0中有所不同。先来看在 Vue3 如何在模版语法中使用ref(options语法中获取ref和2.0版本语法无差异)<template> <div ref="divRef">ref demo</div></template><script>import { ref, onMounted } from "vue";原创 2021-04-30 11:08:42 · 7916 阅读 · 0 评论 -
Framework7在LoginScreen组件中无法使用this.$f7router.navigate()跳转页面解决方法
如果使用了F7的LoginScreen组件调出登录页面,那么在LoginScreen中是无法使用js来跳转页面的,但是可以使用f7-link组件的href属性值进行页面跳转,那么仅仅是这样往往无法满足业务需求,有些页面的跳转须在接口数据返回后进行跳转,为了能用JS来控制页面跳转,可以使用JS的模拟点击a标签来实现,(f7-link渲染出来的实际上就是a标签),在html中写上一个f7-link...原创 2019-06-11 19:18:54 · 2458 阅读 · 0 评论 -
vue使用Framework7记录(一):基础配置
接触Framework7有一段时间了,感觉就一个字:赞,爽。对比于Vue其他的手机端UI框架,Framework7的体验堪比原生,F7自带了路由系统,所以跳转页面什么的用F7的即可,会用VueRouter就会用F7Router。但是使用过程中,坑也是踩过不少,会陆续在后面的博客中记录。先记上Framework7的官方文档地址:https://framework7.io/我用的vue-cli3搭...原创 2019-06-04 15:16:42 · 6190 阅读 · 19 评论 -
vue使用畅言评论
之前还在使用html编写代码的时候,就已经使用过畅言评论了,总体感觉还好,毕竟那时候是免费的,不能要求太高不是,现在一直在用vue开发项目,发现百度上并没有vue使用畅言的例子,于是就有了这篇博文,希望可以帮助到其他人。首先写一个vue原型方法,用来动态加载外部script。Vue.prototype.$loadScript = (url, callback) => { le...原创 2019-02-28 14:32:05 · 1246 阅读 · 2 评论 -
Vue登录成功后跳转到之前的页面
很多时候,项目有些页面需要用户进行登录才可以继续进行操作,,登录完之后就需要跳转到用户登录之前想去的那个页面,这个实现比较简单:使用axios进行http请求,进行拦截:axios.interceptors.response.use( res => { //对响应数据做些事 if (res.data.code === -1) { // 这里根据自己接口返回状态进行判...原创 2018-11-27 13:48:01 · 11033 阅读 · 8 评论 -
vue-cli3使用vue-progressbar
安装vue-progressbaryarn add vue-progressbar --save或者npm i vue-progressbar --save在main.js中引入import VueProgressBar from 'vue-progressbar'Vue.use(VueProgressBar, { color: '#1890ff', // 进度条颜色...原创 2018-11-02 23:58:43 · 5399 阅读 · 0 评论 -
vue+typescript封装axios,实现取消重复请求
vue-cli3可以直接生成vue+typescript项目,然后对axios进行封装,实现拦截多次重复请求,并取消。直接撸代码(也是借鉴网上的,做了修改)在根目录下新建axios.tool.ts文件import Vue from 'vue';import router from './router';import axios from 'axios';import qs from...原创 2018-11-03 18:32:40 · 9537 阅读 · 2 评论 -
vue-cli3 使用less
vue脚手架3出来有一段时间了,相比之前2,cli3文件更为简洁了许多,关于webpack的配置文件config,build已经被删除,若是需要进行配置需要自己手动建立一个vue.config.js,在里面可以进行配置,具体参数详见官网:https://cli.vuejs.org/zh/config/#vue-config-js这里着重讲一下vue-cli3如何使用less进行开发,cli3使用...原创 2018-09-26 11:17:44 · 27655 阅读 · 6 评论 -
vue将表格数据导出为Excel
1.npm先安装三个包:npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev2.下载两个js文件:链接:[https://pan.baidu.com/s/1X0CCKwnOcv4U9J6unpZNEA](https://pan.baidu.com/s/1X0C...原创 2018-09-11 17:42:31 · 2993 阅读 · 0 评论 -
vue 使用vue-i18n 国际化,语言切换功能
最近项目中要使用到语言切换这一功能,遂百度一番,发现使用vue-i18n即可以实现项目国际化。 1. 首先安装vue-i18nnpm install vue-i18n2 在main.js里面引用...import VueI18n from 'vue-i18n'Vue.use(VueI18n)3 创建i18n实例import zh from './../static...原创 2018-08-30 14:06:20 · 6127 阅读 · 1 评论 -
Vue使用axios取消上一次请求
项目需求:列表式切换商品,有时候上一次请求的结果非常慢,而我又点了另外一个商品,这时候第二次请求的接口比上一次快,那么就点击第二次的商品看到的信息却是上一次的商品信息,这样的用户体验极其不好; 解决方案:在点击下一个商品的时候,将上一个商品请求的接口中断取消请求。 axios官网给出了取消请求的方法:方法一:axios.get('/user/12345', { cancelToken...原创 2018-07-31 15:52:24 · 9544 阅读 · 0 评论 -
关于vue项目在Safari浏览器中运行报错:[vue-router] Failed to resolve async component default:ReferenceError
最近开发vue项目,本地在其他浏览器运行时是正常的,可是在Safari浏览器中却报错了;如图 看样子是不能解析es6语法所致;百度一番找到解决方法: 先npm安装: npm install es6-promise --save然后在main.js里加上:require('es6-promise').polyfill();require('es6-promise/auto'...原创 2018-06-13 14:29:52 · 23588 阅读 · 2 评论 -
Vue常用UI框架
PC端: 1. ElementUI:http://element-cn.eleme.io/#/zh-CN 2. iView:https://www.iviewui.com/ 3. VueStrap:http://yuche.github.io/vue-strap/ 4. VueAdmin:https://admin.vuebulma.com/#/ 5. KeenUi:https...原创 2018-04-28 14:35:36 · 4401 阅读 · 0 评论