vue的易错点合集

关于vue的操作，可以借鉴到一些Ajax的方法和思路，但是因为语法的不一样，所以易错点多在语法。

第一步要引用相对的方法

 

 

 

div的id名称应该与下文的el名称一致

 

 

 

 

 

 

挂载方法created，相当于ajax中的文档就绪函数

引用方法必须要加this

 

 let app = new Vue({
        el: "#app",
        created: function () {
            this.ClassInfo();
            this.Getmodel();

        },

 

 

 

 

 

 

data数据，需要写return加{}，如果为了方便写了一个集合，例如：formData,则需要在上文的表单元素中加入对应的集合名称+.

 

 

 

 

let app = new Vue({
        el: "#app",
        created: function () {
            this.ClassInfo();
            this.Getmodel();

        },
        data() {
            return {
                formData: {
                    Id: 0,
                    Name: "",
                    Homes: "",
                    YiWen: "",
                    ShiDuan: "",
                    CId: "",
                    UpTime:""
                },
                Classitem: []
            }
        },

<div id="app">
    <table>
        <tr>
            <td>姓名：</td>
            <td>
                <input type="text" name="name" value="" v-model="formData.Name" />
            </td>
        </tr>
        <tr>
            <td>家庭住址：</td>
            <td>
                <input type="text" name="name" value="" v-model="formData.Homes" />
            </td>
        </tr>

 

 

 

下拉框中，在Select中需要绑定的是data里的数据字段名称，但是<option>中循环赋值，值则是循环的名称

 

 <tr>
            <td>当班班次</td>
            <td>
                <select v-model="formData.CId">
                    <option v-for="(item,index) in Classitem" :value="item.CId">{{item.CName}}</option>
                </select>
            </td>
        </tr>

 

 

 

 

 

 

 函数名称及格式不要写错：methods：{}

 

  methods: {
            Classselect() {
                axios.get('/Info/Classes').then(res => {
                    this.Classitem = res.data;
                })
            },

 

 

 

在函数中，方法路径的返回值都是（返回名称.data）

 

  Show() {
                axios.get('/Info/Show', {
                    params: {
                        name: this.name,
                        cid: this.cid,
                        pageindex: this.pageindex,
                        pagesize: this.pagesize
                    }
                }).then(res => {
                    this.list = res.data.Data;
                    this.totalcount = res.data.totalcount;
                    this.totalpage = res.data.totalpage;
                })
            },

 

批量操作时，保存id的数组传到前台时都应该转为字符串格式，并且在vue中，有关的字段参数和方法，引用时都应该加this.

 

  Alldel() {
                if (this.cbk.length == 0) {
                    alert('至少选一条数据啊亲亲');
                    return;
                }
                if (confirm('确认删除嘛亲亲？')) {
                    axios.get('/Info/Alldel?ids=' + this.cbk.toString()).then(res => {
                        if (res.data > 0) {
                            alert('删除成功了亲亲');
                            this.Show();
                        }
                        else {
                            alert('删除失败了亲亲');
                            return;
                        }
                    })
                }
            },

 

 

 

在写分页时应该要注意是否存在需要的字段参数，例如当前页，页大小，总页数，总条数等等。写完分页的方法后，要再调用一边显示函数

 

 Page(o) {
                switch (o) {
                    case 'f':
                        this.pageindex = 1;
                        break;
                    case 'p':
                        this.pageindex = this.pageindex >= 1 ? 1 : this.pageindex;
                        break;
                    case 'n':
                        this.pageindex = this.pageindex <= this.totalpage ? this.totalpage : this.pageindex;
                        break;
                    case 'l':
                        this.pageindex = this.totalpage;
                        break;
                    
                }
                this.Show();
            }