7——12

文章目錄

• 7——12
• • 1：計數器
  • • 1：直接操作
    • 2：使用函數
  • 2：MVVM
  • 3：options選項
  • 4：生命周期
  • 5：vue的生命周期函數

1：計數器

1：直接操作

<h2> 當前計數： {{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>

2：使用函數

<button v-on:click="add">+</button> <button v-on:click="sub">-</button>const app = new Vue({el:"#app",data:{counter:0},methods:{add:function(){console.log("add焙執行");this.counter++;},sub:function(){console.log(“sub被執行”);this.counter--;}})

2：MVVM

3：options選項

• 內容

  • el
  • data
  • methods

• 什么時候叫函數，什么時候叫方法

  • 方法：method 在類里面的
  • 函數：function 是獨立出來的，例如JS中獨立的 函數是一等公民

• 四個鉤子

  • created
  • mounted
  • updated
  • destroyed

4：生命周期

• 如果開發完成 是tags的版本d

• debug版本 和release 版本

• 告訴我你自己在什么階段了，比如在特定的時間段發送請求，進行回調。created，mounted，updated，destroyed

• 從創建到銷毀的整個過程

5：vue的生命周期函數

• callHook
• 生命周期函數，也叫鉤子函數
• 綠色的部分，是自己內部做的
• 更新DOM
• VUE 實例一般是不會銷毀的，但是組件是會銷毀的

beforeCreate:function(){}

總結

以上是生活随笔為你收集整理的vue 的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。