Vue-组件生命周期

发布于 2020-03-01  237 次阅读 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
    
      <child v-if="isCreated"></child>
    </div>
   

    <script type="text/javascript">

      Vue.component("child",{
        template:`<div>
          <ul>
                     <li v-for="data in datalist">
                         <img :src="data.poster"/>
                         <h3>{{data.name}}</h3>
                         <p>{{data.synopsis}}</p>

                         <ul>
                             <li v-for="item in data.actors">
                                 <img :src="item.avatarAddress"/>
                                 <h4>{{item.name}}</h4>
                             </li>
                         </ul>
                     </li>
            </ul>
            {{title}}
            <button @click="title='1111111111'">click</button>
        </div>`,

        data(){
          return {
            title:"00000",
            datalist:[]
          }
        },

        methods:{
         
        },

        beforeCreate(){
          console.log("beforeCreate")
        },
        created(){
          console.log("created")
        },

        beforeMount(){
          console.log("beforeMount")
        },

        mounted(){
          console.log("mounted","访问dom,setInterval,window.onscroll, 监听事件 ajax")
          axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
            headers:{
              'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}',
              'X-Host': 'mall.film-ticket.film.list'
            }
          }).then(res=>{
            console.log(res.data);
            this.datalist= res.data.data.films
          })

        },

        beforeUpdate(){
          console.log("beforeUpdate")
        },

        updated(){
          console.log("updated","更新之后可以访问dom")
          //  var otitle = document.getElementById("title");
          // console.log(otitle.innerHTML);
        },

        beforeDestroy(){
          console.log("beforeDestroy");
        },

        destroyed(){
          console.log("destroyed--clearInterval ,window.onscroll=null,$off")
        }

      })

      
      var vm = new Vue({
        el: "#box",
        data:{
          isCreated:true
        },
       
        mounted(){
          console.log("根组件的mounted,所有的孩子都创建完了， 自己才会执行")
        }
      })

      // vm.$mount("#box")

     //
     //  vue组件 生命周期 ?
     //  vue组件的 钩子函数？
     //  vue组件的生命周期钩子函数？
    </script>
</body>
</html>

 

注错之当