Vue学习总结-生命周期函数(未完成)

最新推荐文章于 2024-02-29 17:46:00 发布

frieryumao

最新推荐文章于 2024-02-29 17:46:00 发布

阅读量141

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/frieryumao/article/details/101058597

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue学习总结-生命周期函数

生命周期函数-组件创建期间的4个钩子函数

生命周期钩子=生命周期函数=生命周期事件

在这里插入图片描述

生命周期函数-组件运行和销毁阶段的钩子函数

在这里插入图片描述

vue-resource发起get、post、jsonp请求

<template>
  <div>
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
  </div>

</template>

<script>
    export default {
        // name: 'HelloWorld',
        data() {
            return {}
        },
        methods: {
            getInfo() {
                this.$http.get('http://vue.studyit.io/api/getlunbo').then(result=> {
                    console.log(result.body)
                })
            },
            postInfo(){
                //手动发起的post请求，默认没有表单格式，所以有点服务器处理不了
                //通过post方法第三个参数{emulateJSON:true}设置提交表单格式
                this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
                    console.log(result.body)
                })
            },
            jsonpInfo(){
                this.$http.jsonp('http://vue.studyit.io/api/jasonp').then(result=>{
                    console.log(result.body)
            })
        },
        filters: {},
        directives: {}

    }
</script>