一、MVC
M(Mode)数据层
V(View)视图层
C(Controller)控制层
M -> 发送通知 -> 控制层 -> 刷新视图
V -> 发送通知 -> 控制层 -> 刷新数据
二、MVVM
MVVM( Model-View-ViewModel ) 为一种设计模式,下图不仅概括了 MVVM 模式,还描述了在
Vue.js 中ViewModel 是如何和 View 以及 Model 进行交互的。
ViewModel 是 Vue.js 的核心,它是一个 Vue 实例。
当创建了ViewModel 后,双向绑定是如何达成的呢?
- 首先,我们将上图中的DOM Listeners 和 Data Bindings 看作两个工具,它们是实现双向绑定的关键。
- 从 View 看,ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
- 从 Model 看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。
我们通过一组 Hello, world! 实例来深入了解 MVVM 设计模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
</head>
<body>
<!-- V -->
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="message">
<!-- 绑定数据 -->
<h1>{{message}}</h1>
</div>
<!-- 引入库 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
// M
let model = { message: "Hello, vue.js!" }
// VM
let vm = new Vue({
// 挂载元素/值为选择器
el: "#app",
// Model/数据层/
Object data: model
});
使用Vue的过程就是定义MVVM各个组成部分的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel",它用于连接View和Model
在这个示例中,选项对象的el属性指向View, el: ‘#app’ 表示该Vue实例将挂载到 "<div id=“app”></div> “这个元素;data属性指向Model, data: model 表示我们的Model是model对象。
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时 {{ message }} 会被数据对象的message属性替换,所以页面上会输出"Hello World!”。
三、创建一个 vue 实例
上述 Hello, world! 示例已经结合 MVVM 设计模式创建了一个 vue 实例,这里不再阐述。
四、数据与方法
当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
五、生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码:
1、生命周期图示
下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
2.代码演示
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<button type="button" v-on:click="change">按钮</button>
<button type="button" @click="destroy">销毁实例</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"你好,世界",
},
methods:{
show(){
console.log("我是Vue实例methods中定义的函数");
},
change(){
this.msg="被发现了";
},
destroy(){
this.$destroy();
},
},
/*创建期间的生命周期函数*/
/*舒适化VUE实例之前,此时只有el的值被加载,data和methods中的值都不存在,show会报错*/
beforeCreate:function (){
console.log("beforeCreate:data中的值是:"+this.msg);
// this.show(); //data和methods中的值都不存在,show会报错
console.log(this.show);
console.log("beforeCreate函数执行完毕")
},
/*实例化VUE后启动调用,测试data和methods的内容已经存在*/
created(){
console.log("created函数:data中的值:"+this.msg);
console.log(this.show);
console.log("created函数执行完毕");
},
/*模板已经在内存中编译,尚未渲染到页面*/
beforeMount(){
console.log("beforeMount");
},
/*模板已经渲染到页面(该函数执行表示VUE实例真正的初始化完成)*/
mounted(){
console.log("mounted");
},
/*运行期间的生命周期函数*/
/*数据更新之前执行,此时data中的值已经更新,但是页面上调用data的位置的值还未更新。*/
beforeUpdate(){
console.log("beforeUpdate函数:data中的值是:"+this.msg);
console.log(`页面中的值是:${document.querySelector("h3").innerText}`);
},
/*数据更新完成,此时data中的值和页面上显示的data的值相同;*/
updated(){
console.log("updated函数:data中的值:"+this.msg);
console.log(`页面中的值是:${document.querySelector("h3").innerText}`);
},
activate(){
console.log("keep-alive组件激活时调用");
},
deactivated(){
console.log("keep-alive组件被停用时候调用");
},
beforeDestroy(){
console.log("实例被销毁之前被调用,此时实例正常调用");
console.log(this.msg);
},
destroyed(){
console.log("实例被销毁之后被调用,此时所有被绑定的事件和数据都会被移除");
}
});
</script>
</html>
点击“销毁实例”按钮后的结果为: