Vue.js学习笔记第四天（vue的生命周期，vue-resource）

最新推荐文章于 2024-01-31 17:40:27 发布

zzzzzzrrryyy

最新推荐文章于 2024-01-31 17:40:27 发布

阅读量220

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43194919/article/details/105517198

版权

Vue实例的生命周期

在这里插入图片描述

主要是created（）和mounted（）这两个方法

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'ok',
    },
    methods: {
        show() {
            console.log("这是show方法");
        }
    },
    //创建阶段：

    //这是遇到的第一个生命周期函数，在实例完全被创建之前会执行它
    //在这里面，data和methods里面的数据都没有被初始化
    beforeCreate() {
        this.show();
        console.log(this.msg);
    },
    //这是遇到的第二个生命周期函数
    //这里面，data和methods里面的数据已经初始化了
    created() {
        console.log(this.msg);
        this.show();
    },
    //这是遇到的第三个生命周期函数
    //这时候模板已经在内存中已经编译完成了，但是尚未把模板渲染到页面中
    beforeMount() {
        console.log(document.getElementById('h3').innerText)
    },
    //这是遇到的第四个生命周期函数
    //这时候内存中的模板已经真实的挂载到了页面中，用户可以看到渲染好的页面
    //此时，组件进入运行阶段
    mounted() {
        console.log(document.getElementById('h3').innerText)
    },

    //运行阶段:
    //数据被更新的时候会触发这个函数
    //所以这个时候数据已经被更新了
    //但是执行这个方法的时候，页面显示的数据还是原来的数据
    //页面的内容尚未和最新的数据同步
    beforeUpdate() {
        console.log('界面上的元素内容为' + document.getElementById('h3').innerText)
        console.log('data中的msg数据是' + this.msg);
    },
    //这时候页面的数据和最新的数据同步更新了
    updated(){
        console.log('界面上的元素内容为' + document.getElementById('h3').innerText)
        console.log('data中的msg数据是' + this.msg);
    }
});

vue-resource实现get post jsonp请求

<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="getInfo">
        <input type="button" value="jsonp请求" @click="getJsonp">
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '张如意'
        },
        methods: {
            //发起get请求
            //语法：
            /*
            全局Vue对象：
            Vue.http.get('/someUrl',[options]).then(successCallback,errorCallback)
            //body就是向服务器传递的参数
            Vue.http.post('/someUrl',[body],[options]).then(successCallback,errorCallback)
            */
            /*
            在vue实例中：
            this.$http.get('/someUrl',[options]).then(successCallback,errorCallback)
            this.$http.post('/someUrl',[body],[options]).then(successCallback,errorCallback)
            */
            getInfo() {
                this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(function(result) {
                    console.log(result.body);
                })
            },
            postInfo() {
                //以post方法提交的数据类型最好是表单格式的
                //表单格式：application/x-www-form-urlencoded
                //post方法的第三个参数可以设置提交的内容类型
                //emulateJSON：true表示将数据以表单格式提交
                this.$http.post('http://www.liulongbin.top:3005/api/getlunbo', {}, {}).then(function(result) {
                    console.log(result.body);
                })
            },
            getJsonp() {
                this.$http.jsonp('http://www.liulongbin.top:3005/api/getlunbo').then(function(result) {
                    console.log(result.body);
                })
            }
        }
    })
</script>