从永远到永远-一个Java程序员的Vue踩坑实录

	**大师兄说：”学习任何技术，有一大半的人倒在了入门！“。**

深以为然。
四月份初想学习vue，来回折腾了很久。四月二十六，我才得以入门。我为什么要学习vue的一个重要原因就是，感觉前端不说人话。就一点点浅薄的东西，这一堆教xue罗里吧嗦，到不了重点。讲课，最怕的就是，学生不知道是个什么东西，跟着老师背了半本书的概念。js尚且借鉴Java，况vue乎？语法、逻辑、思想，有哪一样配和Java相提并论。少一点废话，先写东西，再辅概念。

7 读取本地数据 扔到static目录中，放其他目录，路径正确也报错。

8 自定义指令

如：给<h2>改变颜色的指令
在main.js中定义指令：

使用：

效果，随机颜色标题

如果要有参数:


在main.js中定义的是全局的，如果要使用局部的，很类似，在当前组件定义：

9 自定义过滤器

管道标识类似于Linux，后边是过滤器名称

定义过滤器，value就是管道标识前的参数

当然再main.js中定义的过滤器是全局的，如果要使用局部的需要如下定义：

尽量使用第一种，避免部分浏览器不识别第二种的问题。
这个名称很奇怪，定义的叫toUppercase,上边调用的是to-uppercase居然也能用，很神奇，不过还是建议一致！

10.路由

有两个页面，目前只能显示一个，如何根据要求跳转到这两个页面。就涉及到路由了。
首先安装模块：

cnpm install vue-router --save

main.js引入、使用、实例化对象（不知道前端咋叫，按Java的来了）、配置路由（这里单独创建了一个文件，之后在main.js引入一下）、在那个容器使用

路由文件：

t调整下App.vue，不再使用某组件的标签，使用，使其灵活跳转。

效果：

发现路径中有个#，可以去掉：

11、设置路由页面

单独定义一个路组件

App.vue中引入使用

设置样式，注意router-link其实本质就是一个a标签。exact关键字，可以使得当前路由变成被选中状态。效果：

12、路由参数设置

13、模拟后端数据

教程自己玩，用的是fireBase。这里因为墙的问题，我用不了这个数据库。索性直接写了个后端小项目，配合玩。
所以在本机springboot+mybatis+MySQL搭建项目。因为vue项目也是跑在本机的，两个默认都是8080端口，为免冲突，将spring boot后端项目端口修改为8081.

测试时，出现了问题，前端开发常见的跨域问题。
为了解决这个问题，可是废了大劲了。喊着公司前端来看了半天，也没看出毛病，就是请求不到数据。
我怀疑这个，跟vue-cli的版本有一定关系，有一些人是说2.X版本，需要自己创建一个vue.config.js来配置代理。网上复制一份，无效果。最终还是，在index.js中实现了。

那么响应访问路径要修改成

到这里，基本上教程开始X扯淡。。。得找新资源了！！！！！！！！！！！！

14、VueX的学习

一言以蔽之： 等学完，再总结。。。

要用，先安装：

cnpm install vuex --save

	补补补补补。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。