Vue.js的初步使用
2017-01-04 17:05
363 查看
Vue.js的初步使用
领导布置了一个新任务,这次尝试着前端使用bootstrap+vue.js后端用thinkphp5进行开发。 页面的样式布局直接使用的模板之家下载的bootstrap模板,因为没啥美感,还是直接下载使用来的快。 接下来是正式部分vue的使用: 在html头文件部分在线引入vue.js <script src="https://unpkg.com/vue/dist/vue.js"></script>或者将vue.js下载后本地引入[vue开发版](http://vuejs.org/js/vue.js) [vue最小版](http://vuejs.org/js/vue.min.js)
直接下载并用 script 标签引入,Vue 会被注册为一个全局变量。重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。
开发环境不要用最小压缩版,不然就失去了错误提示和警告!
然后在创建一个vue应用登陆页面 HTML 代码如下:
<div class="app-cam" id="lgapp"> <form> <input hidden v-model="rmpwd" id="rmpwd"> <input type="text" v-model="user.account" class="text" placeholder="请输入用户名"> <input type="password" v-model="user.pwd" placeholder="请输入密码"> <div class="switch" data-on="success" data-off="warning" style="float: right;margin-bottom: 1em"> <span>记住密码</span> <input type="checkbox" name="my-checkbox" data-on-color="success" data-off-color="warning" v-bind:checked="rmpwd|getstatus"/> </div> <div class="submit"><input v-on:click="login" type="button" value="登陆"></div> <ul class="new"> <li class="new_left"><p><a href="#" v-on:click="fprgotpwd">忘记密码?</a></p></li> <li class="new_right"><p class="sign">新用户?<a href="#" v-on:click="regit">注册</a></p></li> <div class="clearfix"></div> </ul> </form> </div>
js代码
new Vue({ el:'#lgapp', data:{ user:{ account:getCookie("cache_account"), pwd:getCookie("cache_pwd"), }, rmpwd:getCookie("cache_pwd_checked"), }, methods:{ login:function () { var user=this.user,rd_remember=this.rmpwd; $.ajax({ url:loginURL, type: 'post', dataType:'json', data: { 'user': user, }, success: function(result){ if(result.status==1){ setCookie("cache_account",user.account,30);//记住账号 //记住密码 if(rd_remember=='true'){ setCookie("cache_pwd",user.pwd,30); setCookie("cache_pwd_checked",true,30);//勾选状态 } else{ setCookie("cache_pwd","",30); setCookie("cache_pwd_checked",false,30);//勾选状态 } window.location.href=result.url; } else { $.alert({ title: '课程签到系统', type: 'red', content: result.msg, }); } } }) }, fprgotpwd:function(){ $.alert({ title: '课程签到系统', type: 'red', content: '请联系管理员重置密码!', }); }, regit:function(){ $.alert({ title: '课程签到系统', type: 'red', content: '请向管理员申请账号!', }); } }, filters:{ getstatus:function (rmp) { if(rmp=='true'){ return true; } else{ return false; } }, } })
filter过滤器 getstatus用于判断当前密码记住状态 rmpwd为cookie中获取记录
function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; }
setCookie为设置cookie
function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) }
delCookie删除cookie
function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); }
需要注意的是
<input hidden v-model="rmpwd" id="rmpwd">
rmpwd为hidden属性,所以要实时响应其值得改变时需要
$("#rmpwd").val(state).show().focus().blur().hide();
改变其值->显示->获取焦点->失去焦点->再隐藏
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- 设计模式---状态模式在web前端中的应用
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 编写你的第一行 HTML 代码,来帮助蝙蝠侠写一封情书
- div 2 列 50%宽度布局
- div 2 列 50%宽度布局
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧