网站开发实训周报,wordpress 数据库错误,企业形象设计图片,做网站制作课程总结一、MVC模式与MVVM模式
1.1mvc模式
MVC模式是移动端应用广泛的软件架构之一#xff0c;MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户#xff0c;也就是通过 HTML页面接受用户动作#…一、MVC模式与MVVM模式
1.1mvc模式
MVC模式是移动端应用广泛的软件架构之一MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户也就是通过 HTML页面接受用户动作将指令传递给Controler如单击一个按钮就会将按钮触发的业务传递给 Controller:Controller完成业务逻辑要求Model改变状态。 图1mvc执行过程图
1.2MVVM格式
MVVM 模式是将MVC模式的Controller改成 ViewModel。View的变化自动更新 ViewModel,ViewModel的变化也会自动同步到 View层显示。View层用来接受用户请求如 DOM 事件、AJAX等:Model层处理数据不再与 View层交互数据;ViewModel 监听 View 层请求状态的变化同时刷新 View层显示ViewModel和 Model层之间进行数据双向绑定Model层监听ViewModel的变化。MVVM 模式的执行过程是 View层接受到请求告诉 VewModel用户需要执行一些处理动作当 ViewModel 发生变化告诉 View层需要更新页面。所谓的数据双向绑定是 ViewModel 需要更新 Model 层的数据;反之,Model层的数据改变在ViewModel中的数据状态也要进行相应的改变。 图2mvvm执行过程图
1.3mvc模式和mvv模式的区别
在 MVC 模式中数据是单向通信的按照 View→Controller→Model-View方向循环。在MVVC模式中数据可以双向通信核心是ViewModel对象。
二、Vue框架的特性
Vue 是一套构建用户界面的渐进式框架Vue只关注视图层采用自底而上增量开发的设计Vue的目标是通过 API实现数据绑定和组合视图组件。Vue是主流的MVVM 框架之一。
三、vue框架的安装与使用
3.1方法一
1.复制vue.js的全部内容 进入这个网址CTRLA全选并复制所有内容
2.新建一个名称为vue2.js文件,将复制内容粘贴进去 3.测试正确结果
!DOCTYPE html
htmlheadmeta charsetutf-8titlevue的安装、创建vue.js/titlescript src./vue2.js/script/headbodydiv idappname{{name}}/divscriptvar vmnew Vue({el:#app,data:{name:郑州}})/script/body
/html 3.2方法二利用CDN方式引入vue.js文件
直接使用网址不用下载
!DOCTYPE html
htmlheadmeta charsetutf-8titleCDN方式引用/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/script/headbodydiv idappname{{name}}/divscriptvar vmnew Vue({el:#app,data:{name:河南}})/script/body
/html
运行结果 3.3方法三采用npm和webpack模块形式引入vue.js文件暂时先不讲
