Vue基础：vue实例

MVVM模型

1. MVVM是一种基于前端开发的架构模式
2. 其核心是提供对 View 和 ViewModel 的双向数据绑定
3. ViewModel 负责连接 View 和 Model，保证视图和数据的一致性

创建一个 Vue 实例

实例化 Vue 对象

通过构造函数 Vue（）创建一个
Vue 的根实例，每一个 new Vue（）都是一个 Vue 构造函数实例

var vm = new Vue({
  // 选项
})

Vue 构造器要求实例化时需传入选项对象

选项对象包括挂载元素（el）、数据（data）、方法（methods）、模板（tamplate）、生命周期钩子函数等选项。

数据与方法

 <div id="app">
  <p>{{message}}</p>
  <button onclick="app1.message='welcome!'">更新</button>
 </div>
 <script>
  var app1=new Vue({
   el:"#app",
   data:
    {message:'hello Vue.js'},
    created:function(){
     console.log('message is '+this.message);
    },
    mounted:function(){
     console.log("已挂在在DOM上");
    },
    updated:function(){
     console.log("已经更新DOM");
    }
  })
 </script>

实例生命周期钩子

Vue 实例被创建前都有初始化过程，有完整生命周期

从开始创建、初始化数据、编译模板、挂载 DOM 、渲染→更新→渲染、卸载等一系列过程

Vue 生命周期共分为 8 个阶段

—beforeCreate（创建前）
— created（创建后）
—beforeMount(载入前)
— mounted（载入后）
—beforeUpdate（更新前）
— updated（更新后）
—beforeDestroy（销毁前）
— destroyed（销毁后）

生命周期图示