欢迎来到站长教程网!

Javascript/Ajax

当前位置:主页 > 网页制作 > Javascript/Ajax >

进修 Vue.js 碰着的那些坑

时间:2021-05-04|栏目:Javascript/Ajax|点击:

排名不分先后

最近仿佛都是只发了一些糊口类,吐槽的一些 blog,不更新点技能相关的 大概有人会以为 这家伙必定又在偷懒了。

那么 好 我要开始装逼了

类空指向

就是雷同于空指针的一种错误方法 不会在 console 上报错 很是难找的问题

resp.data.user.avatar

//假如这个user是null的话 这么挪用不会报错 也不会向下执行 很是坑

//假如你想判定这个avatar的话 要这么做

if(resp.data.user && resp.data.user.avatar){
 //do...
}

ES6 箭头函数

箭头函数和非箭头函数也是有很大区此外

//普通匿名函数写法
api()
.then(function(resp){
 this.count()
 //留意这个this 不是能正常利用的 count会是个undefined
})


//ES6 箭头函数
api()
.then(resp => {
 this.count()
 //这里没短处
})

vuetify

这是一个基于 Google Material 设计语言的 UI 框架,可以在 Vue.js 运行。

只是安装方法有点非凡,而且它的插件安装方法也很非凡。

譬喻 vuetify 的 dialog

import VuetifyDialog from 'vuetify-dialog'
import vuetify from './plugins/vuetify';

Vue.use(VuetifyDialog, {
 context: {
 vuetify
 }
})

这就导致你写 UI 的时候 要面向 Google 编程。(虽说其他后端语言也差不多 笑)

vue-cli

假如你是要新建设一个项目,而且这个项目局限不是出格大。

我很是推荐你利用 vue-cli 建设,说简朴点儿 这会晋升 b 格。

空话少说 上图

学习 Vue.js 碰到的那些坑

vue create your_project_name

vue ui

vue ui 会打开一个可视化页面 像是上图那样。

然后在内里导入由 vue-cli 建设的项目就可以和上图一样了 :)

异步和同步

其实之前有个很是蠢的想法。

就是在用户输完表单之后,当即和处事器举办验证,然后将功效刷新到 UI 上。

可是这个刷新 UI 需要一个同步操纵。

我就一个劲的折腾怎么去搞定将 axios 的异步操纵酿成同步。

假如是之前的 jQuery 就很是简朴么 只需要将内里的 aysnc 属性改掉就可以了。

可是你每次发请求 欣赏器城市在 console 上提示 不推荐 XHR 同步请求。

为啥呢,因为欣赏器内里页面是单线程的,假如你的请求是同步的,那么就会导致每个请求城市让页面卡住必然的时间。

所以我最后照旧改成了慢慢验证的方法 让所有的请求都是异步操纵的。

运行和陈设

假如你当地开拓

运行 serve(有些项目是 dev) 会开放一个端标语 让你会见用户界面,并举办靠近及时的 UI 调解。

假如你是要陈设到线上 需要先执行 build 会在输出目次内里生成静态文件。

再把这些文件陈设随处事器上 像是:

这里我很是推荐 caddy,它是一个基于 golang 开拓的处事器,陈设轻量化,而且带有打点 api,很是精采的支持 Http2,而且 支持 http3。

TIPS

这里只记录一些刚开始玩的项目,在后头的开拓里,还会碰着更多问题。
譬喻页面之间的刷新,等等等等。

所以很快就会有下一章的。

但愿能帮到你。

以上就是进修 Vue.js 碰着的那些坑的具体内容,更多关于进修 Vue.js 碰着的坑的资料请存眷本网站其它相关文章!

您大概感乐趣的文章:

上一篇:详解React中共享组件逻辑的三种方法

栏    目:Javascript/Ajax

下一篇:详解微信小措施轨迹回放实现及碰着的坑

本文标题:进修 Vue.js 碰着的那些坑

本文地址:www.jiaocheng88.com.cn/JavaScript/61940.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长教程网 版权所有 苏ICP备20040415号-3