MVVM模型
- MVVM是一种基于前端开发的架构模式
- 其核心是提供对 View 和 ViewModel 的双向数据绑定
- 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(销毁后)