Vue的基本操作

本文主要是介绍Vue的基本操作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue的基本操作

dal层和数据迁移可以按照之前的方式进行，步骤还是一样的。先创字段再迁移，然后在写dal的各种功能。

与Ajax不同的地方就是前台操作，思维方式是很像的。

在控制器里与ajax有不同的地方是：

 //添加视图
        public ActionResult AddStudent()
        {
            return View();
        }
        //添加方法
        [HttpPost]
        public ActionResult Add(Student student)
        {
            return Json(bll.Add(student), JsonRequestBehavior.DenyGet);
        }


        //显示视图
        public ActionResult ShowStudent()
        {
            return View();
        }

        [HttpGet]
        public ActionResult PageShow(string sname, int? nid, int pageindex = 1, int pagesize = 3)
        {
            var list = bll.PageShow(sname, nid, pageindex, pagesize);
            return Json(list,JsonRequestBehavior.AllowGet);
        }

需要在方法后加入  JsonRequestBehavior.AllowGet（如果是post方法需要换成JsonRequestBehavior.DenyGet）

添加-----

 表单内容都需要写在div中

el:"#div的id"

下拉框创一个数组，将数据传到数组中  在表单select中绑定   <select v-model="fromData.NId">中写的对应字段名称" 在 option中

<option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>

对应操作

复选框也需要创数组

将传过来的数组进行分割传入后台

显示---分页--查询--批删--批改

@{
    ViewBag.Title = "EditStudent";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>EditStudent</h2>
<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>学生姓名</td>
            <td>
                <input type="text" v-model="fromData.SName" value="" />
            </td>
        </tr>
        <tr>
            <td>学生班级</td>
            <td>
                <select v-model="fromData.NId">
                    <option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>学生年龄</td>
            <td>
                <input type="text" name="name" v-model="fromData.Age" value="" />
            </td>
        </tr>
        <tr>
            <td>学生性别</td>
            <td>
                <input type="radio" name="name" v-model="fromData.Sex" value="true" /> 男
                <input type="radio" name="name" v-model="fromData.Sex" value="false" /> 女
            </td>
        </tr>
        <tr>
            <td>学生爱好</td>
            <td>
                <input type="checkbox" name="name" v-model="items" value="游泳" />游泳
                <input type="checkbox" name="name" v-model="items" value="跳水" />跳水
                <input type="checkbox" name="name" v-model="items" value="冲浪" />冲浪
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" name="name" value="修改" v-on:click="editStudent" />
            </td>
        </tr>
    </table>
</div>
<script>
    var id = location.search.substring(4);  //截取ID

    let app = new Vue({
        el: "#app",  //挂载
        created: function () {  //钩子函数   类似于 jQuery中 文档就绪函数的作用
            this.getSelect();  //调用已经写好方法
            this.getById();
        },
        data() {
            return {
                //自定义对象名称
                fromData: {
                    SId:0,
                    NId: "1",
                    SName: "",
                    Sex: "1",
                    Hobby: "",
                    Age: ""
                },
                selectItems: [],
                items:[]
            }
        },
        methods: {
            //加载下拉菜单
            getSelect() {
                axios.get('/Student/GetClassList').then(res => {
                    this.selectItems =  res.data
                })
            },
            //添加数据
            editStudent() {
                this.fromData.Hobby = this.items.join(',');
                axios.post('/Student/Edit', this.fromData).then(res => {
                    if (res.data > 0) {
                        alert('修改成功');
                        location.href='/Student/ShowStudent'
                    } else {
                        alert('修改失败');
                    }
                })
            },
            //修改数据
            getById() {
                axios.get('/Student/GetById?id='+id).then(res => {
                    this.fromData.SId = id;
                    this.fromData.NId = res.data.NId;
                    this.fromData.SName = res.data.SName;
                    this.fromData.Sex = res.data.Sex;
                    this.fromData.Hobby = res.data.Hobby;
                    this.fromData.Age = res.data.Age;

                    this.items = res.data.Hobby.split(',');  //读出来的是字符串 将 字符串 传给数组
                })
            }
        },
        computed: {

        }
    })
</script>

 详情---修改

这篇关于Vue的基本操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！