1.非父子之間傳值

非父子之間傳值用第三方

   <div id='app'>
       <chat></chat>
   </div>
    <script src="vue/dist/vue.js"></script>
    <script>
    Vue.component('chat',{
        template:`
           <div>
              <ul>
                 <li v-for="value in arr">{{value}}</li>
              </ul> 
              <user @send='rcvMsg' userName='jack'></user>
              <user @send='rcvMsg' userName='rose'></user>
           </div>
       `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.arr.push(txt)
            }
        }
    })  
    
    Vue.component('user',{
        props:['userName'],
        template:`
          <div>
             <label>{{userName}}</label>
             <input type='text' v-model='inputVal'>
             <button @click='sendMsg'>發(fā)送</button>
          </div>
        `,
        data:function(){
            return{
                inputVal:''
            }
        },
        methods:{
          sendMsg:function(){
              this.$emit('send',this.userName+':'+this.inputVal)
          }
        }
    }) 
    new Vue({
        el:'#app'
    })
    </script>

2.生命周期

每個Vue實例在被創(chuàng)建之前都要經過一系列的初始化過程,這個過程就是vue的生命周期。

生命周期的八個過程：

1.beforeCreate（創(chuàng)建前）
2.created（創(chuàng)建后）
3.beforeMount(載入前）
4.mounted（載入后）
5.beforeUpdate（更新前）
6.updated（更新后）
7.beforeDestroy（銷毀前）
8.destroyed（銷毀后）

<div id='app'>{{msg}}</div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>