vuejs 学习旅程一
来上海快一年了,一直在东钿金融工作着,这一年来主要负责公司前期的房产评估微信平台,公司IT部也是刚刚成立,成立IT部门不仅仅只是维护房产评估微信,而是要做一个互金理财平台。于是我一年来的主要工作是负责互金理财平台的前端工作,主要分三大块,后台,PC端,移动端(微信端)。这些工作在3月份基本已经完成总体开发,进入稳定。根据公司的要求是要有一个app。于是老大就让我学习用vuejs 写一套移动端。所以就引出了今天的主题vuejs学习旅程。
一,首先从简单的开始,花了一天的时间写一个简单菜单隐藏显示的功能 ,废话不多少,晒图晒代码
效果图:

就是这种隐藏显示
html:
vuejs:

css:
思路:vuejs 特点是数据双向绑定,所以这里用的是showmenu_is 这个值控制菜单是否显示。而且用了template标签v-if判断showmenu_is 。为true的时候就显示,否则不显示,然后再给点击的元素上面直接绑-on:click=menu()。写了一个menu方法就是点击来回切换true or false.相比jquery 是要简单挺多的。关闭的时候也可以直接使用menu这个方法。一开始使用vuejs不知从何下手。理解了原理 ,使用起来真的是比jquery方便多了。好了,这一节就说这么多。下一节说下vuejs 里面的ajax功能。
vuejs 学习旅程一的更多相关文章
- vuejs 学习旅程之 vue-resource
		
如上图,所有的数据是从php获取过来的.所以就引出了vuejs 与php通信之说.百度了一下需要使用到一个vue插件 就是今天的主题 vuejs 学习旅程之 vue-resource vue-reso ...
 - vuejs学习网站推荐
		
vuejs学习网站推荐 https://coligo.io/
 - vuejs学习——vue+vuex+vue-router项目搭建(三)
		
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
 - vuejs学习——vue+vuex+vue-router项目搭建(二)
		
前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...
 - VueJs 学习笔记
		
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
 - vuejs学习之 项目打包之后的首屏加载优化
		
vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...
 - redis学习教程一《Redis的安装和配置》
		
redis学习教程一<Redis的安装和配置> Redis的优点 以下是Redis的一些优点. 异常快 - Redis非常快,每秒可执行大约110000次的设置(SET)操作,每秒大约可执 ...
 - VueJS学习资料大全
		
参考:http://www.worktle.com/articles/2467/ 文档&社区 Vue.js官方网站(中文) :http://cn.vuejs.org/ Vue论坛:http:/ ...
 - Vuejs学习笔记1
		
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...
 
随机推荐
- MangoDB篇章(1)
			
关系型数据库遵循ACID规则 事务(transaction)4个特性:原子性(A).一致性(C).独立性(I).持久性(D) : 分布式系统(distributed system): 由多台计算机和通 ...
 - python2 + selenium + eclipse 中,配置好runserver 127.0.0.1:9000,运行的时候,报错
			
python2 + selenium + eclipse 中,配置好runserver 127.0.0.1:9000,运行的时候,报错,如图: 原因: google发现是WSGI appl ...
 - chromium浏览器开发系列第四篇:如何调试最新chromium
			
接二连三的事情,时间比较紧张,但是还是没有把这个系列的文章丢掉,因为这也是对自己知识的总结吧.提倡大家多写写,以后再看的时候会有种莫名的小激动. 上周写的是chromium的目录结构,好像大家不太感兴 ...
 - windows7如何打开远程桌面 -…
			
单位的机器,刚装上了windows7旗舰版(当然不是花银子滴),想打开远程桌面连接,这样从别的机器登录也方便.可是问题来了,windows7对安全的设置比较高,不像windows XP那么随便一点就可 ...
 - Oracle 11gr2的完全卸载
			
Oracle 11gr2的完全卸载方式与前些版本有了改变,运行D:\app\Administrator\product\11.2.0\dbhome_1\deinstall的deinstall.bat批 ...
 - eclipse maven plugin&n…
			
eclipse maven plugin 插件 安装 和 配置 Posted on 2012-07-13 12:40 fancydeepin 阅读(9850) 评论(7) 编辑 收藏 所属分类: ...
 - 2014 SCAU_ACM 暑期集训
			
暑期集训,希望能在这段时间获得对得起自己的提升吧 时间:7.11~8.30 集训各专题内容: 1.贪心,递推,基础DP(背包,区间DP,状态压缩DP(去年出了不少于2道铜牌题,看着办)) 2.搜索(B ...
 - 二维数组是二级指针pointer to pointer!
			
二维数组居然是个类似于二级指针(pointer to pointer)的东西,十分震惊! #include <stdio.h> int main() { ][]={{,,,},{,,,}, ...
 - JS控制GridView行选择
			
ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显 ...
 - 移动端专用css
			
通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色 设置css属性 ...