vue.js 初步学习资源

时间:2022-02-09 00:18:19

最近做一个内部系统,准备尝试下新的js写法,即vue.js

起源于AMD的规范,AMD相对于CommonJS规范,CommonJS规范是针对后端js写的最早这个项目叫Server.js后来改名为CommonJS,著名的nodeJs就是CommonJS的一个实践,当然并不全是遵循CommonJS规范的,这一点在CommonJS的*上可以看到。

https://zhuanlan.zhihu.com/p/26937250

这个地址是一个腾讯工程师写的,入门很好地文章,收藏下,也便于其他人学习。

 

初学者最开始了解的一般是router,而这个ES5规范下的router,坑还是不少的,其中一个就是关于路径怎么输入都是一个路径的问题,这个就是单页应用中,所谓前端路由引起的,也就是并不向后台重新发起请求,只是在前端通过链接里使用#,来变更页面内容的方法,vue-router支持两种方式,

一种就是URL中的hash ("#")

另一种是history interface在H5中新增的方法

现在明白了,为什么要加#了吧,那如果不想用#怎么办,觉得不好看怎么办,那就在vue-router的配置里指定: mode: history,即可

详细的解释在:https://zhuanlan.zhihu.com/p/27588422?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

 

router的问题解决了,剩下的就按照最上边的教程开始敲代码吧。

做后台的同学去github上搜索:iview-admin 一个现成的项目,可以拿来借鉴。

 

代理的坑写在这里了:

https://github.com/iview/iview-project/issues/4

关于生命周期的东西:

https://segmentfault.com/a/1190000008570622

 

在地铁上,再写一些吧最近这几天遇到的坑和解决途径

今天就有一个,封装了一个Select作为子组件,父组件初始化的时候,要初始化子组件的值,那么做一个prop作为初始化值,从父组件传到子组件吧,这样子组件就有了初始化的数值,当然子组件上的Select里的Option项目是自己负责初始化的。

这样之后,子组件里Select肯定要选择值呀,选择之后呢,就会报错了。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

下边的是https://segmentfault.com/q/1010000010353891/a-1020000012714770

这里回复别人使用的,不再重复打了。

我做的好复杂,哈哈,还没开始用vuex。
做法这样的:
父组件传值子组件,prop属性传递
子组件传值父组件,$emit传递
另外:子组件想要修改自己定义的prop怎么办,$emit值到父组件,由父组件绑定的prop来修改
父组件:

v-bind:resourceTypeId="resource.resourcesTypeId" 
v
-on:selResourceType="setResourceType"

 

子组件:

data () {
return {
selResourceModel:
'请选择资源类型'
}
}
<Select v-model="selResourceModel" @on-change="selResourceType" placeholder="请选择资源类型" clearable style="width:250px">
<Option v-for="item in resourcestypeList" :key="item.id" :value="item.id">{{ item.displayName }}</Option>
</Select>
props: [
"resourceTypeId"
],

 

这里为什么没有在子组件直接v-model绑定props的resourceTypeId,因为这样的话,选择Select项目的话,值就要改变了prop的值是不允许在子组件改变的,那么就只能重新定义一个,属性selResourceModel,然后监控属性props:resourceTypeId,一旦修改就重新设置
selResourceModel这样就解决了

selResourceType () {
this.$emit("selResourceType", this.selResourceModel)
}
watch: {
resourceTypeId:
function (newTypeId) {
this.selResourceModel = newTypeId
}
},