vue.js 初步学习资源

最近做一个内部系统，准备尝试下新的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
    }
},