概述
用vue实现登录的简单的页面
对了，我这个是直接下载了vue.min.js和vue-resource.min.js这两个文件到我自己的框架上面，你们也可以直接引用线上的
代码如下所示：
<style> body{ background-color: #92d2af; } </style> <h2 align="center">登录系统</h2> <body id="app"> <div align="center" class="ab"> <p> 用户名： <input type="text" v-model="zhanghao" placeholder="输入用户名"> </p> <p>密码 ：<input type="password" v-model="mima" placeholder="输入密码"> </p> <!-- <input type="reset" value="重置">--> <!-- <button @click="register">重置</button>--> <button @click="login">登录</button> </div> <script> Vue.http.options.emulateJSON = true;//这个的设置了提交的方式的是post的方式提交 var vue=new Vue({//这个是实现对数据的绑定 el:'#app', data:{ zhanghao:"", mima:"" }, methods:{ login:function () { //console.log("你好！"); this.$http.post("/application/huoqu", {//这里是将表单的数据提交到该地址 zhanghao:this.zhanghao,//我将表单的两个文本传过去 mima:this.mima }).then(function (data) {//这个是获取到了刚传过去文件该文件的整个数据
if(data.body.results)//如果返回的数据的值是true那么久说明登录成功 {//获取传过去文件的返回值，如果是为true的话就跳转到登录成功的页面 console.log(data.body.results); window.location.href="/application/bbb"; } //console.log(data.body.result); //window.location.href="/application/aaa"; else{//反之则跳转到失败的页面 console.log(data.body.results); window.location.href="/application/aaa"; } }) } } }) </script> <h5 align="center"><a href="http://zf11.com/application/sign">返回注册</a> </h5> </body> --------------------------------------------------------------------------------------------
对于后台,我是通过php的zf框架写的，所以可能会有所不同，但是在其他应该也是这样的思路：
return new JsonModel(array('results'=>false));这样，在前台能获取到我的results的值
最后
以上就是繁荣野狼为你收集整理的vue实现数据的绑定以及如何进行和后台php就行数据的交互的全部内容，希望文章能够帮你解决vue实现数据的绑定以及如何进行和后台php就行数据的交互所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复