首次使用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//设置值的操作