Vue 生命周期钩子

Vue 生命周期钩子-LMLPHP

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

通俗的理解,Vue对象管理一个标签,把数据渲染到指定的位置,就好比你是这条街的城管就管这条街,后期的组件也是如此,对象管理某一个html片段;

生命周期钩子函数

比如 created 钩子可以用来在一个实例被创建之后执行代码:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mountedupdateddestroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

PS:

  • created创建出实例,才能发送请求从后端获取数据
  • mounted可以设置定时任务,延迟任务···
  • beforeDestroy设置取消定时任务···

生命周期图示

Vue 生命周期钩子-LMLPHP


测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <button @click="handleC">点我显示组件</button>
    <!--组件使用-->
    <child v-if="is_show"></child>
    <hr>
</div>

</body>
<script>
    // 1 定义个组件---》生命周期
    Vue.component('child', {
        template: `
            <div>
                <h1>{{name}}</h1>
                <button @click="handleC">点我弹窗</button>
            </div>`,
        data() {
            return {
                name: "HammerZe",
                t:'',
            }
        },
        methods: {
            handleC() {
                this.name = "彭于晏"
                alert(this.name)
            }

        },
        // 生命周期钩子函数8个
        beforeCreate() {
            console.log('当前状态:beforeCreate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        created() {
            // 向后端加载数据
            console.log('当前状态:created')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },

        beforeMount() {
            console.log('当前状态:beforeMount')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        mounted() {
            console.log('当前状态:mounted')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状 态:', this.name)
            //用的最多,向后端加载数据,创建定时器等
            // setTimeout:延迟执行
            // setInterval:定时执行,每三秒钟打印一下daada
            this.t = setInterval(() => {
                console.log('daada')
            }, 3000)

        },
        beforeUpdate() {
            console.log('当前状态:beforeUpdate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        updated() {
            console.log('当前状态:updated')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeDestroy() {
            console.log('当前状态:beforeDestroy')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        destroyed() {
            console.log('当前状态:destroyed')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
            //组件销毁,清理定时器
              clearInterval(this.t)
              this.t = null
            	console.log('destoryed')
        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            is_show: false
        },
        methods: {
            handleC() {
                this.is_show = !this.is_show

            }
        },


    })
</script>
</html>

Vue 生命周期钩子-LMLPHP

Vue 生命周期钩子-LMLPHP

Vue 生命周期钩子-LMLPHP

Vue 生命周期钩子-LMLPHP


前后端交互

这里介绍三种前后端交互的方式:

  1. jquery的ajax方法发送请求(基本不用了)
  2. js官方提供的fetch方法(原来XMLHttpRequest)(官方的,用的也少)
  3. axios第三方,做ajax请求(推荐)

PS:凌乱的知识点

# ajax:异步的xml请求,前后端交互就是xml格式,随着json格式发展,目前都是使用json格式
# jquery的ajax方法   $.ajax()  方法---》只是方法名正好叫ajax
# js原生可以写ajax请求,非常麻烦,考虑兼容性---》jquery

案例一:三种方式的使用

后端

from flask import Flask,make_response

app = Flask(__name__)
@app.route('/')
def index():

    obj = make_response('Hello Vue!')
    # 处理跨域
    obj.headers['Access-Control-Allow-Origin'] = '*'
    return obj

if __name__ == '__main__':
    app.run()

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
  <p style="font-size: 48px;align-content: center"> 从后端拿到的数据--->{{text}}</p>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
        },
        created() {
            // 方式一:
            //向后端发请求,拿数据,拿回来赋值给text
            $.ajax({
                url:'http://127.0.0.1:5000/',
                type:'get',
                success: (data)=>{
                    console.log(data)
                    this.text=data
                }
            })

            // 方式二:js原生的fetch
            // fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
            //     console.log(res)
            //     this.text=res.name
            //
            // })

            // 方式三 axios

            // axios.get('http://127.0.0.1:5000').then(data => {
            //     console.log(data.data)
            //     this.text=data.data.name
            // })


        }


    })
</script>
</html>

Vue 生命周期钩子-LMLPHP

Vue 生命周期钩子-LMLPHP

Vue 生命周期钩子-LMLPHP

总结

  • 使用第二种需要转json格式
  • 后端修改,前端获取也修改
  • 第三张数据取值,注意在data.data里

Vue 生命周期钩子-LMLPHP


案例二:展示电影数据

后端

from flask import Flask,make_response,jsonify

app=Flask(__name__)
@app.route('/films')
def films():
    import json
    with open('./movie.json','r',encoding='utf-8') as f:
        res=json.load(f)
    obj = make_response(jsonify(res))
    obj.headers['Access-Control-Allow-Origin']='*'
    return obj

if __name__ == '__main__':
    app.run()

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <ul>
        <li v-for="film in films_list">
            <p>电影名字是:{{film.name}}</p>
            <img :src="film.poster" alt="" width="100px" height="150px">
            <p>电影介绍:{{film.synopsis}}</p>
        </li>
    </ul>

</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            films_list:[]
        },
        created() {
            axios.get('http://127.0.0.1:5000/films').then(res => {
                console.log(res.data)
                this.films_list=res.data.data.films
            })

        }
    })
</script>
</html>

movie数据

{
  "status": 0,
  "data": {
    "films": [
      {
        "filmId": 5931,
        "name": "致我的陌生恋人",
        "poster": "https://pic.maizuo.com/usr/movie/923ddd6da070a705d533b48c9eb9996d.jpg",
        "actors": [
          {
            "name": "雨果·热兰",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e96d642a2c613bb38010394e77770a9d.jpg"
          },
          {
            "name": "弗朗索瓦·西维尔",
            "role": "Raphaël Ramisse / Zoltan",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9f20b16cbf161f28ad90e21dcd57abd2.jpg"
          },
          {
            "name": "约瑟芬·约比",
            "role": "Olivia Marigny / Shadow",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/b0b7ee851580bce62c00985cf1a1c061.jpg"
          },
          {
            "name": "本杰明·拉维赫尼",
            "role": "Félix / Gumpar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/21ced090240371f98b1d92a842a2398a.jpg"
          },
          {
            "name": "卡米尔·勒鲁什",
            "role": "Mélanie",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/f0a2cbd274934de44bc02568c751ea19.jpg"
          }
        ],
        "director": "雨果·热兰",
        "category": "喜剧|爱情",
        "synopsis": "穿过千千万万时间线,跨越漫长岁月去寻找曾经的爱人。只是平行时空,重新认识,她还会爱上他吗?一次激烈的争吵,一场意外的时空旅行,拉斐尔(弗朗索瓦·西维尔 饰)从一名成功的畅销书作家,变成平庸的中学语文老师;妻子奥莉薇亚(约瑟芬·约比  饰)从家庭主妇成为了星光熠熠的著名钢琴家。再相遇,身份颠倒,不再是夫妻,平行时空又一次浪漫邂逅,拉斐尔能否守住最初的爱情?",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "法国",
        "language": "",
        "videoId": "",
        "premiereAt": 1649894400,
        "timeType": 3,
        "runtime": 118,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5920,
        "name": "边缘行者",
        "poster": "https://pic.maizuo.com/usr/movie/afdef208d7b72a950b164c007e8a0837.jpg",
        "actors": [
          {
            "name": "谭耀文",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9bb5e7a0d1ae00cb64370802c0ca812c.jpg"
          },
          {
            "name": "黄明升",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/a1b031211683411b6aea7288cdaa0233.jpg"
          },
          {
            "name": "任贤齐",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/42ff2bb4fc35cfc4c569cce29b1dc574.jpg"
          },
          {
            "name": "任达华",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/56087e1d22305c93dc9c30441f0b60e0.jpg"
          },
          {
            "name": "方中信",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/cdd4b9595ba13f68a1d145902c811bbf.jpg"
          }
        ],
        "director": "黄明升",
        "category": "犯罪|动作",
        "synopsis": "1997年回归前夕,多方势力矛盾激化,暴力事件频发。巨变当前,黑帮龙头林耀昌(任达华 饰)对亲信阿骆(任贤齐 饰)委以帮派重任。多重身份的阿骆在黑白边缘行走,一场除暴行动正悄然掀开反杀的序幕。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国香港,中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 113,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5926,
        "name": "迷失1231",
        "poster": "https://pic.maizuo.com/usr/movie/506cd1a0e038e6bb3a749d49a75a7c95.jpg",
        "actors": [
          {
            "name": "徐晓陆",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9c42c60f4faacc50222e9b3f53107571.jpg"
          },
          {
            "name": "孙飞翔",
            "role": "杜扬羽",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4fcc3790a4c01ec9e907ef53d2ef40d2.jpg"
          },
          {
            "name": "申容泽",
            "role": "法朋顺",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/2edaa1e730f9cc5a806536e306919295.jpg"
          },
          {
            "name": "郭蓉",
            "role": "柏小慧",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/67eeaa6708d3c4455a2eefa37e904728.jpg"
          },
          {
            "name": "管金麟",
            "role": "冷凌",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/f4f9155d0ab1e1c495ef6163bef08f74.jpg"
          }
        ],
        "director": "徐晓陆",
        "category": "惊悚|恐怖",
        "synopsis": "怪面魅影在幽暗午夜神秘游荡,黑衣飘摇,诡笑惊悚,不断侵扰尾随青年男主。或在废弃仓库,或在深悠长廊,一次次挥舞利斧,用索命代价带走无尽恐惧。更为吊诡的是,男主人公却深陷在同一个残酷的日子不能自拔,一次次逃亡,一次次被杀,恐惧不断升级,迷失在奇异时空,逃无可逃……当终极真相震撼揭幕,真正的恐惧才伴随着巨大痛苦彻底爆发!本片在青春时尚的快节奏叙事中,尽展密集吓点,又发人深省,是恐怖片迷必看佳作。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 89,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5928,
        "name": "人间世",
        "poster": "https://pic.maizuo.com/usr/movie/27406332a32ebef989f179ff5d109676.jpg",
        "actors": [
          {
            "name": "陶涛",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/0489f46c74aaab491eda50abd5611698.png"
          },
          {
            "name": "张琪",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/15758f0a8aaa7424bd9d7a33479ffa7d.jpg"
          },
          {
            "name": "秦博",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/c33bb8e7f4395b74fe9cdab7e4acf640.jpg"
          },
          {
            "name": "范士广",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4f52c439d48cb25ef659659b5e93f6ed.png"
          }
        ],
        "director": "陶涛|张琪|秦博|范士广",
        "category": "纪录片",
        "synopsis": "电影《人间世》由陶涛、张琪、秦博、范士广四位导演共同执导,陶涛,张琪联合监制,秦博、范士广任总策划。影片选取两位身患绝症的病人,将目光聚焦于她们的家庭,记录下她们人生最后的时光,书写了一首关乎爱的生命诗篇。电影《人间世》是一部不同于电视版的大银幕作品,秉承对生命的敬畏,以全新的主题立意,构建不一样的叙事视角与故事结构,将电影蒙太奇手法创造性融入真实感人的纪录影像,向电影中这些真实,可爱并飞扬着生命力量的人物致以最大的敬意。人间世,爱是感同身受的勇气,触手可及!",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5932,
        "name": "幺妹住在十三寨",
        "poster": "https://pic.maizuo.com/usr/movie/0ea0373776ca18fae9f1f70a856384a7.jpg",
        "actors": [
          {
            "name": "余铁",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/0c51f7259fcbd8bffb4873f58b86a83f.jpg"
          },
          {
            "name": "廖梦妍",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/de93f62cf7cf8ee2da96da57a1912c75.jpg"
          },
          {
            "name": "刘天宝",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/804bb3db37f7158f7f00c2cc0c133007.jpg"
          },
          {
            "name": "覃诚芳",
            "role": "冉芳",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/17e0648cdc8a31dac93222494be73618.png"
          },
          {
            "name": "陈炫羽",
            "role": "卫小勇",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/909d88d0b952b489d9921d92343c522e.png"
          }
        ],
        "director": "余铁",
        "category": "剧情|歌舞",
        "synopsis": "本片充分表现了男女主角在振兴乡村的大背景下,实现自已的人生理想作出的努力。曲折跌宕的情节,浪漫而幽默的语言,武陵山雄奇壮观的美景,丰富多彩的土家文化,一首首美丽动人的歌曲都将给您带来美的享受,这是一个把都市的繁华喧闹与山乡宁静之美相结合而展现的当今现代都市与民族山乡融合并进的故事。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 104,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5933,
        "name": "误杀瞒天记",
        "poster": "https://pic.maizuo.com/usr/movie/de2be5cf14be8687cf26e5cfebcec04e.jpg",
        "actors": [
          {
            "name": "尼西卡特·卡马特",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/5b80929a74bb703550815c91adba3f0f.jpg"
          },
          {
            "name": "阿贾耶·德乌干",
            "role": "Vijay Salgaonkar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/20a357055dafe5d11605ded8dff4f8b6.png"
          },
          {
            "name": "塔布",
            "role": "Meera Deshmukh",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/86be9d9cd4bc5280998142c7d1935ad7.jpg"
          },
          {
            "name": "施芮娅·萨兰",
            "role": "Nandini Salgaonkar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e9eff8814241cf00a750cc2d1f2aae1f.jpg"
          },
          {
            "name": "拉贾特·卡普尔",
            "role": "Mahesh Deshmukh",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/67cb7c8a3512298a893360a985b0569d.jpg"
          }
        ],
        "director": "尼西卡特·卡马特",
        "category": "悬疑|犯罪",
        "synopsis": "男主人公维杰经营着一家网络公司,有着幸福的家庭。某天,大女儿安玖不堪男孩萨姆骚扰而错手将其杀死。这场黑夜里的误杀,打破了维杰一家人安宁的生活。为了捍卫女儿和家庭,只有小学文凭的维杰,开始了一些列瞒天过海的计划。该片是电影《误杀》的印度原版,因其缜密的悬疑推理和精巧的反转叙事被奉为悬疑犯罪片经典,并被多国翻拍。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "印度",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 143,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5904,
        "name": "珠峰队长",
        "poster": "https://pic.maizuo.com/usr/movie/e50ab3429a7a99964bd0307103241b3f.jpg",
        "actors": [
          {
            "name": "苏拉王平",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/05be45da838f393a34ed61a92821187d.jpg"
          },
          {
            "name": "崔舟萍",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e6c97b4b19e0a43359968c51af9716f6.jpg"
          },
          {
            "name": "小溪",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/965e2b23b595d7716edf8709bf74a60f.jpg"
          },
          {
            "name": "刘萍",
            "role": "演员",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/fd01a35554cdee9a66bc9c213cb7908c.jpg"
          },
          {
            "name": "吴曦",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e2ff16e4fe08b281c109c59c21d4909e.jpg"
          }
        ],
        "director": "吴曦",
        "category": "纪录片",
        "synopsis": "每天生活两点一线的白领、卖掉自家小店的店主、背负沉重KPI的销售、在成功与失败间挣扎的创业者……8个普通人,带着各自的故事与梦想,在民间专业高山向导、队长苏拉王平的带领下,踏上了憧憬已久的珠峰之旅,也许,也是一次死亡之旅。他们在尼泊尔的珠峰南坡集结出发,穿越裂缝深不见底的恐怖冰川,攀上高达千米的蓝色冰壁,爬过山体岩石断面的“黄带”,朝着世界之巅一步步靠近。这支起初被外国队伍“看扁”的中国民间登山队,面对“窗口期”极短的恶劣天气和可能发生的冲顶“大堵车”,能否成为2019年全球第一支登顶珠峰的团队?本片是中国首部沉浸式体验攀登珠峰全程的电影,也是华语电影史上“最高难度”的纪录片——创下在8470米以上最高海拔完成无人机起飞航拍的新纪录。观众将跟随镜头“空降”珠峰攀登现场,与这群不甘平凡的普通人一起,为心中的热爱疯狂一次。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1652400000,
        "timeType": 3,
        "runtime": 83,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5916,
        "name": "新灰姑娘2",
        "poster": "https://pic.maizuo.com/usr/movie/41a23e0bc5896e78777a0d3247308f32.jpg",
        "actors": [
          {
            "name": "爱丽丝·布莱哈特",
            "role": "导演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/6d43b3ebf40eea8b0e7a9f667a73409c.jpg"
          },
          {
            "name": "蒋丽",
            "role": "艾 拉",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4ae6fd3988f8cd011366bf91bea793db.jpg"
          },
          {
            "name": "邵敏佳",
            "role": "莉 莉",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e5b7ed0517bd8d673b87d8958bf8bfcb.jpg"
          },
          {
            "name": "赵路",
            "role": "痩鼠曼尼",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/09439815e94d6c5577a68fb4b0924acd.jpg"
          },
          {
            "name": "王和逸",
            "role": "胖鼠沃尔特",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e934ea82b775ea976b67bdfecf4ff80d.jpg"
          }
        ],
        "director": "爱丽丝·布莱哈特",
        "category": "动画",
        "synopsis": "为了帮助王子艾利克斯解开魔咒,灰姑娘艾拉带着魔法师莉莉,以及沃尔特和曼尼两只老鼠朋友再度出发寻找生命宝石,但朋友莉莉却在冒险中为了保护艾拉而牺牲,拿回生命宝石的艾拉面临着一个选择,究竟是帮助王子,还是救回朋友?",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中国大陆",
        "language": "",
        "videoId": "",
        "premiereAt": 1654041600,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 3451,
        "name": "阿凡达2",
        "poster": "https://pic.maizuo.com/usr/movie/c5da4eddf824824c21f42aebd4f4120f.jpg",
        "actors": [
          {
            "name": "萨姆·沃辛顿",
            "role": "杰克·萨利",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/df050071a829cb47d7612e1e4c3f8b37.jpg"
          },
          {
            "name": "佐伊·索尔达娜",
            "role": "奈蒂莉",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/a457d0e419128720688a6d11712db4b4.jpg"
          },
          {
            "name": "西格妮·韦弗",
            "role": "格蕾丝·奥格斯",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/2ebc1d29d21743c960de288930921814.jpg"
          },
          {
            "name": "史蒂芬·朗",
            "role": "迈尔斯·夸奇上校",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/368a975d10ee8e0bf30b5d5906fb6527.jpg"
          }
        ],
        "director": "詹姆斯·卡梅隆",
        "category": "动作|科幻|奇幻|冒险",
        "synopsis": "《阿凡达2》的剧情承接自第一部的5年之后。曾经的地球残疾军人杰克·萨利,如今已经是潘多拉星球纳美族一方部族的族长,并且与爱妻娜塔莉共同育有一对可爱的儿女,日子过得平淡而充实。然而某天,有个部族的兄弟在海岸附近巡逻时遭到利器割喉身亡。通过现场勘查,以及作为前海军陆战队员的敏锐直觉,杰克判断已经有人类的阿凡达混入了部落……",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "美国",
        "language": "英语",
        "videoId": "",
        "premiereAt": 1671321600,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      }
    ],
    "total": 9
  },
  "msg": "ok"
}

Vue 生命周期钩子-LMLPHP

04-14 08:42