Vue2.x生命週期
阿新 • • 發佈:2018-11-05
<script type="text/ecmascript-6"> export default { name: 'Header', props:{ Title:{ type:String } }, data() { return {} }, methods:{ updateTitle:function(){ // this.Title="我已經被Footer的點選事件修改了!"; this.$emit("UpdateFatherTitle","我的內容來自子元件!"); } }, beforeCreate() { // 物件沒有建立前 此時只是對事件做了配置 // 可以做載入的動畫 // alert("元件例項化之前執行的函式"); }, created() { // 元件已經例項化好了 DOM還未生成 // 可以獲取對應的獲取一些資料 賦給屬性 可以結束loading載入 // alert("元件例項化完畢,但頁面還未顯示"); }, beforeMount() { // 編譯當前模板 是在虛擬DOM中 // alert("元件掛載前 頁面仍未展示 但虛擬DOM已經配置完"); }, mounted() { // 將el 指定的dom元素 掛載渲染 // 從後臺獲取資料 在該方法裡填寫 // alert("此方法執行後 頁面顯示!"); }, beforeUpdate() { // 元件更新之前 // alert("元件更新前,頁面仍未更新"); }, updated() { //元件更新後 頁面就展示了 // alert("元件更新後 此方法自行後 頁面顯示"); }, beforeDestroy() { // alert("元件銷燬前"); }, destroyed() { // ALERT("元件銷燬"); }, components: {} } </script>