**大师兄说:”学习任何技术,有一大半的人倒在了入门!“。**
深以为然。
四月份初想学习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
补补补补补。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。