一、MVCm(mode )数据层
“视图”视图层
控制层(c )
M -发送通知-控制图层-刷新视图
发送V -通知-控制层-更新数据
二、mvvmmvm (模型视图视图模型)是一种设计模式。 下图不仅显示了mvvm模式
在Vue.js中，ViewModel是如何与View和Model进行交互的？
ViewModel是Vue.js的核心和Vue实例。
创建ViewModel后，是如何实现双向绑定的呢？
首先，将上图中的DOM监听器和数据绑定视为两个工具。 这些是实现双向绑定的关键。 从View的角度看，ViewModel的DOM监听器工具会监视页面上DOM元素的变化，并在发生变化时更改Model中的数据。 从Model的角度看，更新Model数据时，Data Bindings工具会更新页面上的DOM元素。 我们通过Hello，world的小组！ 实例深入理解MVVM设计模式
！ doctypehtmlhtmllang=' zh-cn ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width，iewith -- V --div id='app '！ -双向绑定- -输入类型='文本' v -模型='消息'！ -绑定数据--h1 { {消息} }/h1/div！ -部署库--script src='./node _ modules/vue/dist/vue.js '/scriptsrc='./js/index.js '/script
使用Vue的过程是定义MVVM的每个组件的过程。
View定义模型创建连接View和Model的Vue实例或“ViewModel”。 在此示例中，可选对象的el属性指向View，而el: ‘#app”的数据属性指向Model，指示Vue实例将装载在名为“div id=“app”/div”的元素上
虽然Vue.js具有各种数据绑定语法，但最基本的格式是文本插值，因为使用大括号对语法时，{{ message }}将在运行时被数据对象的message属性替换输出为。”
三、为vue实例创建上述Hello、world！ 示例结合MVVM设计模式创建了vue实例，但在此不进行说明。
四.创建数据和方法Vue实例后，将data对象中的所有属性添加到Vue的响应系统中。 当这些属性的值更改时，视图将生成“响应”。 也就是说，匹配项将更新为新值。
五.生命周期中的每个Vue实例在创建之前必须经过一系列初始化过程。 例如，需要设置数据接收、编译模板、在DOM上装载实例，以及在数据发生更改时更新DOM。 此过程还执行一个称为生命周期挂接的函数，为用户提供在特定场景中添加自己代码的机会。
例如，可以使用created挂接在创建实例后执行代码。
1、生命周期图标下图显示实例的生命周期。 虽然不需要马上了解一切，但随着不断学习和使用，其参考价值会越来越高。
2 .代码演示！ doctypehtmlhtmllang=' en ' xmlns : v-on=' http://www.w3.org/1999/XHTML ' headmetacharset=' utf-8 ' titletitlital
</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>点击“销毁实例”按钮后的结果为：