开始时间: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:<li v-for:"tagName of tagNames" v-bind:class={active:activeName==tagName} v-on:click="selected(tagName)">
这条语句我们生成了一个列表,并为其绑定了一个选中事件,为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

一个JAVA WEB伪全栈的VUE入坑随笔,从零点零五学起相关推荐

  1. Web全栈~38.Vue

    Web全栈~38.Vue 上一期 基本语法 template和script交互 <template><div id="app"><div>我是{ ...

  2. Web 的全栈工程师必修课 - 关于 MVC 框架

    本章我们将围绕 MVC 这个老而弥坚的架构模式展开方方面面的介绍,对于基于 Web 的全栈工程师来说,它是我们知识森林中心最茂密的一片区域,请继续打起精神,积极学习和思考. 无论是在 Web 全栈还是 ...

  3. Java应用开发全栈工程师

    Java应用开发全栈工程师 1.全栈工程师 全栈工程师大家可能都知道,就是包括web前端,web后端,手机应用开发都有了解,而且都可以上手做的工程师. 2.Java全栈工程师 Java全栈工程师一般情 ...

  4. 黑马程序员之Web前端全栈 · 阶段一 前端开发基础 (3)

    Web前端全栈 · 阶段一 前端开发基础 (3) 说明 三.HTML 标签 1. HTML 语法规范 1.1 基础语法概述 1.2 标签的关系 2. 基本结构标签 2.1 第一个 HTML 2.2 基 ...

  5. 一个Java Web后台任务执行工具的设计与实现

    一个Java Web后台任务执行工具的设计与实现 提到后台任务,最容易想到的恐怕就是Java 中的Timer或者大名鼎鼎的开源定时器Quartz,但是,从本质讲,他们都是定时器,以时间间隔严格的进行间 ...

  6. Java web 开发填坑记 2 -如何正确的创建一个Java Web 项目

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72566261 本文出自[赵彦军的博客] Java web 开发填坑记 1-如何正确 ...

  7. eclipse配置tomcat,并部署一个Java web项目到tomcat上

    eclipse配置tomcat 1.windows--preference 2.server--Runtime  Environment 3.Add 下图中第2表示:选中自己安装tomcat的目录 创 ...

  8. Eclipse创建一个JAVA WEB项目

    1.打开Eclipse,选择菜单栏的file>New>Dynamic Web Project 弹出窗口如下 2.点击Next>Next进入下面界面: 3.想要生成web.xml,就把 ...

  9. 华为WEB前端全栈成长计划招募

    小编知道 很多朋友对成为前端大牛有着深深的向往 并有诸多技术问题希望得到解决 因为市面上各种教程质量良莠不齐 而且想要掌握高阶的开发技术 需要耗费大量的时间和精力 So,华为特别推出 [WEB前端全栈 ...

最新文章

  1. [转载]婚姻不只是娶一个女人那么简单
  2. 【iOS】从实际出发理解多线程(二)--NSThread基础操作
  3. Oracle表分区大全
  4. DTD与XML的关系。。说的不错,拿来看看,学习了
  5. 关于软件工程的课程建议
  6. B - 吉哥系列故事——完美队形II HDU - 4513 (马拉车)
  7. SouthidcEditor编辑器如何支持上传png图片
  8. 2020阿里云线上峰会预告 | 凌云时刻
  9. Hadoop HA集群部署
  10. 温习一下嵌入式老鸟 (火哥) 的面试指南
  11. linux获取weblogic版本,LINUX查看JDK和Weblogic版本命令
  12. 史上最全运放运算放大器知识讲解(附主流厂商)
  13. 为什么手机网速太慢_为什么苹果手机的网速变慢了_苹果手机上网速度慢的解决方法-系统城...
  14. java盘盈盘亏_反映财产物资的盘盈、盘亏和毁损情况,应当设( )科目。
  15. 关于RabbitMQ连接不上None of the specified endpoints were reachable的几个原因
  16. 极米Z6X Pro值得购买吗?这篇评测告诉你
  17. C或C++中的isalpha、isalnum、islower 和 isupper函数的详解
  18. A load persistent id instruction was encountered, but no persistent_load function was specified.
  19. 基于Socket、OpenCV和MFC实现的网络实时视频监控
  20. 类和对象的概述及二者之间的关系

热门文章

  1. 大三学生独自破解逆天AI模型:我只是把撩妹的时间,都用来研究机器学习了...
  2. 清华大学成立听觉智能研究中心,要解决可解释和鲁棒性问题
  3. 活动合作 | AI NEXTCon 硅谷AI技术峰会(北京分会)大咖来袭
  4. 这么多人,AI怎么知道你说的是哪个? | 李飞飞团队CVPR论文+代码
  5. 2018深圳国际零售信息化暨无人售货展
  6. PCDN实现flash无延时直播的技术原理与优点 1
  7. mysql修改密码、找回密码
  8. SQL service
  9. centos6.5安装redmine2.6
  10. 在WinForm中屏蔽中文输入法