一个JAVA WEB伪全栈的VUE入坑随笔，从零点零五学起

HmyBmny 发布于2019-08-21 15:33 / 3587人阅读

摘要：开始时间日接触，先在官网十目一行学完了基本特性，作为一个的伪全栈，用感受了一把双向绑定，感觉比的要强悍不少，但这开发环境吧，不能写个，就总觉得自己不能零距离接触。

开始时间：3.26日
接触Vue，先在官网十目一行学完了基本特性：http://cn.vuejs.org/v2/guide/，作为一个JAVA WEB的伪全栈，用Myclipse感受了一把双向绑定，感觉比JQUERY的JSRENDER要强悍不少，但这开发环境吧，不能写个.vue，就总觉得自己不能零距离接触VUE。网上各种百度，逛知乎，起初我是抵触的，当年笔记本装了一个VS STUDIO，C盘瞬间变红的陈年往事还历历在目，但为了学的专业一点，还是装了一个VS CODE，什么vetur，auto close tag插件一装，简直炫酷，关于安装了vs code,你还需添点啥，推荐这一篇：http://www.cnblogs.com/zzsdre...。
后面接触一周了，感觉VUE最吸引自己的是根据需要定义模块化HTML，即Vue.component，就像JSRENDER一样，但VUE组件化更解耦，也更加随意。HTML页面引用VUE.JS这种方式感觉显得不是那么现代化，所以又开始捣腾，接触NODE.JS,WEBPACK。所以，事又来了，安装NodeJs,开始接触纯前端的开发。
1、WINDOWS下安装配置NODEJS推荐：http://blog.csdn.net/xxmeng20...。
重点：
A：系统环境里添加安装目录node_modules文件夹地址
B:添加设置prefix和cache文件node_global和node_cache
如果运行遇到：node -v：socket: (10106) 无法加载或初始化请求的服务提供程序；请运行
netsh winsock reset 重启cmd或者电脑
2、WINDOWS下构建vue+WEBPACK的开发环境
推荐查看：http://www.cnblogs.com/jiajia...，前端小妹的博客，讲的都特别实在
重点：A、不要总是npm，在天朝，想干活，还是多用cnpm,不然就是等。。。。。
B、跟着小妹大侠新建第一个VUE项目时，让你选择是否配置ESLINT检查支持时，千万不要选YES，不然你后面学习VUE，保准用不了一个小时，你就印了那句话“从入门到放弃”，重要的事情说三遍，别选YES，别选YES，别选YES，跟着小妹学，是没有错的。
C：小妹谁提到了WEBPACK，但是也就提提，标题扣五分；
3、开始开发吧，别墨迹。开发除了自己的第一个基于VUE的前端单页面应用（基本实现，还需改进）：https://github.com/closertb/m...
这里讲一个学以致用的知识点：
列表选中样式的切换:
JQUERY中我们通常采用:
$("li[class="active"]").removeClass("active"); //将当前选中的项目解除被选中的样式
$(selector).addClass("active");//为选中的条目添加被选中的样式；
VUE中没有选择器，但对于CSS属性支持状态关联操作（Class 与 Style 绑定）：
eg：v-bind:class="{ active: isActive }"
解读：当isActive为真时，active样式有效，Dom渲染结果是：class=“active”

  当为false时，active样式无效，Dom渲染结果是：class=“”

因此我们可以利用这个属性做文章
标签HTML：

这条语句我们生成了一个列表，并为其绑定了一个选中事件，为class动态绑定了一个判断事件
同样我们在选择这个事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
数据属性：
    data(){
        return{
            tagNames:[
                {name:"hello",tabLink:"/Hello"},
                {name:"Login",tabLink:"/Login"},
                {name:"Nav",tabLink:"/Nav"}
            ],
            activeName:"hello" //当activeName初始值为空时，浏览器加载时默认没有选择的列表项，当为hello时，hello列表默认被选中
        }
    },
4、感觉差不多了吧，外面的世界还有一项技能，你需要掌握，使用GITHUB管理你自己的代码
用啥软件：git
使用方法：http://www.jianshu.com/p/7fa6...，一步一步，讲的真的不能更好。
5、下一步，写LOGIN

GPU云服务器云服务器全栈的栈的java描述 java 栈的应用 java栈的深度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88224.html

一个JAVA WEB伪全栈的VUE入坑随笔:从登录开始（VUEX）

摘要：此文章用于记录本人学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。这里的用户信息和登录状态都是直接取的中的用户信息进行属性值初始化。此文章用于记录本人VUE学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。中间的曲折只有自己知道，有...

Zack 2019-08-20 15:47 评论0 收藏0
vue2全家桶+koa2+mongodb搭建一个简单伪全栈博客

摘要：本来不想推的，看到上有个项目很简单，都有，推推看咯。虽然这个项目很简单，但是还蛮有趣，用来入门和以及再好不过了。本来不想推的，看到github上有个项目很简单，都有300 star，推推看咯。虽然这个项目很简单，但是还蛮有趣，用来入门vue2和nodejs以及mongodb再好不过了。等这几天把公司手头的事情忙完，再把vuex的部分强化下。基于vue2/vuex/vue-rout...

bitkylin 2019-08-21 17:19 评论0 收藏0
来，告诉你Node.js究竟是什么？

摘要：当某个执行完毕时，将以事件的形式通知执行操作的线程，线程执行这个事件的回调函数。为了处理异步，线程必须有事件循环，不断的检查有没有未处理的事件，依次予以处理。另外，单线程带来的好处，操作系统完全不再有线程创建销毁的时间开销。前言如果你有一定的前端基础，比如 HTML、CSS、JavaScript、jQuery；那么，Node.js 能让你以最低的成本快速过渡成为一个全栈工程师(我称...

Jonathan Shieber 2019-08-26 10:19 评论0 收藏0
cors跨域之简单请求与预检请求（发送请求头带令牌token）

摘要：所以跨域请求分两种简单请求和预检请求。但对于第二个错误，好像没法向第一种那样，将预检请求转变为简单请求，所以，只有寻找方法怎么在后端实现相应的预检请求，来返回一个状态码，告诉浏览器此次跨域请求可以继续。引子自从从JAVA伪全栈转前端以来，学习的路上就充满了荆棘（奇葩问题），而涉及前后端分离这个问题，对cors的应用不断增多，暴露出的问题也接踵而至。这两天动手实践基于Token的WE...

zsy888 2019-08-20 17:37 评论0 收藏0
cors跨域之简单请求与预检请求（发送请求头带令牌token）

摘要：所以跨域请求分两种简单请求和预检请求。但对于第二个错误，好像没法向第一种那样，将预检请求转变为简单请求，所以，只有寻找方法怎么在后端实现相应的预检请求，来返回一个状态码，告诉浏览器此次跨域请求可以继续。引子自从从JAVA伪全栈转前端以来，学习的路上就充满了荆棘（奇葩问题），而涉及前后端分离这个问题，对cors的应用不断增多，暴露出的问题也接踵而至。这两天动手实践基于Token的WE...

RaoMeng 2019-08-15 10:36 评论0 收藏0