首页 > 代码库 > 第一次使用vue开发
第一次使用vue开发
1、首先在页面上添加如下的代码
var app = new Vue({ el: ‘#signupForm‘, data: { UserName: ‘‘, PWD: ‘‘ } });
2、在下面添加html代码
<form id="signupForm" method="post" class="form-horizontal" action=""> <div class="form-group"> <label class="col-sm-4 control-label" for="firstname">用户名</label> <div class="col-sm-5"> <input v-model="UserName" type="text" class="form-control" id="txtUserName" name="txtUserName" placeholder="用户名" /> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="lastname">密码</label> <div class="col-sm-5"> <input type="password" v-model="PWD" class="form-control" id="txtPWD" name="txtPWD" placeholder="密码" /> </div> </div> <div class="form-group"> <div class="col-sm-9 col-sm-offset-4"> <button type="submit" class="btn btn-primary" name="signup" value="登录">登录</button> </div> </div> </form>
<form id="signupForm" method="post" class="form-horizontal" action="">
固定范围
<input v-model="UserName" type="text" class="form-control" id="txtUserName" name="txtUserName" placeholder="用户名" />
<input type="password" v-model="PWD" class="form-control" id="txtPWD" name="txtPWD" placeholder="密码" />
设置影响的变量。
3、我们将数据提交到后台
$(document).ready(function () { $.validator.setDefaults({ submitHandler: function () { $.ajax({ type: "post", url: ‘/Login/ValidUser‘, data: app.$data, success: function (data) { if (data.suc) { alert("登录成功！！！"); location.href = ‘@Url.Content("~/Admin/Home/")‘; } else { alert(data.remark) } }, dataType: "JSON" }); } }); })
使用的是app.$data。将数据传递给后台，大功告成。
大功告成。
第一次使用vue开发
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。