首次使用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。将数据传递给后台,大功告成。

大功告成。

后来的事情,又发现一个事情:

复制代码
var myData={
a:1
};

var app=new Vue({
el:"#app",
data:myData
});

app.a//获取值的操作
app.a=1//设置值的操作
复制代码

 

posted on   漫思  阅读(363)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示