vue 的生命周期

7——12

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(){

}