生命周期初探:mounted钩子案列

admin

这个方法 会在页面渲染之前运行,通常可以用来初始化获取页面数据

[C++] 纯文本查看 复制代码

var app = new Vue({
    el: '#app',
    data: {
        title: 'Todo-List',
        todoData: [],

        // 用户输入内容
        inp_data: '',

        ched: false
    },

    methods: {

        getall() {
            axios.get('http://localhost:3000/todolist')
            .then((backdata) => {
                // then中是一个普通函数，那么函数中的this指向promise对象
                // then中是一个箭头函数，this将被固定的指向Vue实例对象
                // console.log(backdata.data)
                // 对象的解构赋值
                var { data } = backdata;
                this.todoData = data;
                // console.log(data);
            })
        },

        // 方法的简洁声明方式
        add() {
            if (this.inp_data == '') {
                alert('内容不能为空')
            } else {
                var id = this.todoData.length > 0 ? this.todoData[this.todoData.length - 1].id + 1 : 1;
                var title = this.inp_data;
                var data = { id, title, status: false };
                axios({
                    method: 'post',
                    url: 'http://localhost:3000/todolist',
                    data,
                }).then((backdata) => {
                    var { data, status } = backdata;
                    if (status == 201) {
                        this.todoData.push(data);
                        this.inp_data = ''
                    }
                })
            }
        },

        // 删除
        del(key) {
            axios({
                method: 'delete',
                url: 'http://localhost:3000/todolist/' + this.todoData[key].id
            }).then((backdata) => {
                var { status } = backdata;
                if (status == 200) {
                    this.todoData.splice(key, 1);
                }
            })
        },

        chedAll() {
            var buer = !this.ched;
            for (let i = 0; i < this.todoData.length; i++) {
                this.todoData[i].status = buer;
                axios({
                    method: 'put',
                    url: 'http://localhost:3000/todolist/' + this.todoData[i].id,
                    data: this.todoData[i]
                }).then((backdata) => {
                    if (backdata.status == 200) {
                        console.log(1);
                    }
                })
            }
        },


        Clear(){
            for(let i=0;i<this.todoData.length;i++){
                if(this.todoData[i].status == true){
                    axios({
                        method:'delete',
                        url:'http://localhost:3000/todolist/' + this.todoData[i].id,
                    }).then((backdata)=>{
                        if(backdata.status == 200){
                            this.getall();
                        }
                    })
                }
            }
        }



    },

    // 这个方法会在页面渲染(展示)之前运行
    mounted: function () {
        this.getall();
    }
})