青海网站建设哪家好,网页设计与制作自考,百度收录有什么用,wordpress 弹出登录页一、MVVM概述
1.1、什么是MVVM
MVVM#xff08;Model-View-ViewModel#xff09;是一种软件设计模式#xff0c;由微软WPF#xff08;用于替代WinForm#xff0c;以前就是用这个技术开发桌面应用程序的#xff09;和Silverlight#xff08;类似于Java Applet#xff…一、MVVM概述
1.1、什么是MVVM
MVVMModel-View-ViewModel是一种软件设计模式由微软WPF用于替代WinForm以前就是用这个技术开发桌面应用程序的和Silverlight类似于Java Applet简单点说就是在浏览器上运行WPF的架构师Ken Cooper和Ted Peters开发是一种简化用户界面的事件驱动编程方式。由John Gossman同样也是WPF和Sliverlight的架构师与2005年在他的博客上发表。
MVVM源自于经典的MVCModel-View-Controller模式。MVVM的核心是ViewModel层负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下
该层向上与视图层进行双向数据绑定向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.jsAnfular JS
1.2、为什么要使用MVVM
MVVM模式和MVC模式一样主要目的是分离视图View和模型Model有几大好处 好处
1、低耦合视图View可以独立于Model变化和修改一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变。2、可复用你可以把一些视图逻辑放在一个ViewModel里面让很多View重用这段视图逻辑。3、独立开发开发人员可以专注于业务逻辑和数据的开发ViewMode设计人员可以专注于页面设计。4、可测试界面素来是比较难以测试的而现在测试可以针对ViewModel来写。
View
View是视图层 也就是用户界面。前端主要由HTHL和csS来构建 为了更方便地展现viewmodel或者Hodel层的数据 已经产生了各种各样的前后端模板语言 比如FreeMarkerThymeleaf等等 各大MVVM框架如Vue.js.Angular JS EJS等也都有自己用来构建用户界面的内置模板语言。
Model
Model是指数据模型 泛指后端进行的各种业务逻辑处理和数据操控 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层 前端开发者对从后端获取的Model数据进行转换处理 做二次封装 以生成符合View层使用预期的视图数据模型。 需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分 而Model层的数据模型是只包含状态的
比如页面的这一块展示什么那一块展示什么这些都属于视图状态(展示)页面加载进来时发生什么点击这一块发生什么这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定 View Model的内容会实时展现在View层 这是激动人心的 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了 我们开发者只需要处理和维护View Model 更新数据视图就会自动得到相应更新真正实现事件驱动编程。 View层展现的不是Model层的数据 而是ViewModel的数据 由ViewModel负责与Model层交互 这就完全解耦了View层和Model层 这个解耦是至关重要的 它是前后端分离方案实施的重要一环。
二、Vue
Vue(读音/vju/ 类似于view) 是一套用于构建用户界面的渐进式框架 发布于2014年2月。与其它大型框架不同的是 Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层 不仅易于上手 还便于与第三方库(如vue-routervue-resourcevue x) 或既有项目整合。
2.1、MVVM模式的实现者
Model模型层 在这里表示JavaScript对象View视图层 在这里表示DOM(HTML操作的元素)ViewModel连接视图和数据的中间件 Vue.js就是MVVM中的View Model层的实现者
在MVVM架构中 是不允许数据和视图直接通信的 只能通过ViewModel来通信 而View Model就是定义了一个Observer观察者
ViewModel能够观察到数据的变化 并对视图对应的内容进行更新ViewModel能够监听到视图的变化 并能够通知数据发生改变
至此 我们就明白了 Vue.js就是一个MVVM的实现者 他的核心就是实现了DOM监听与数据绑定 2.2、为什么要使用Vue.js
轻量级 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kbReact压缩后44kb)移动优先。更适合移动端 比如移动端的Touch事件易上手学习曲线平稳文档齐全吸取了Angular(模块化) 和React(虚拟DO) 的长处 并拥有自己独特的功能如计算属性开源社区活跃度高……
三、第一个Vue程序
【说明】IDEA可以安装Vue的插件! 注意Vue不支持IE 8及以下版本 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。
3.1、下载地址
开发版本 包含完整的警告和调试模式https//yuejs.org/js/vue.js删除了警告 30.96KBmingziphttps//vuejs.org/js/vue.min.js CDN script src“https://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js”/script script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script 这两个已经变了用下边这个 min压缩版
3.2、代码编写
Vue.js的核心是实现了MVVM模式 她扮演的角色就是View Model层 那么所谓的第一个应用程序就是展示她的数据绑定功能操作流程如下 创建一个HTML文件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--1.导入Vue.js--script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script/head
body!--view层 模板--
div idapp{{message}}
/divscript typetext/javascriptvar vmnew Vue({el: #app,// MOdel数据data: {message: hello vue!}});
/script/body
/html引入Vue.js !--1.导入Vue.js--
script srchttps://unpkg.com/vue/dist/vue.js/script创建一个Vue实例 script typetext/javascriptvar vmnew Vue({el: #app,// MOdel数据data: {message: hello vue!}});
/script说明 el: #vue绑定元素的IDdata:{message:Hello Vue!}数据对象中有一个名为message的属性并设置了初始值 Hello Vue 将数据绑定到页面元素 !--view层模板--
div idapp{{message}}
/div说明只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来 即可实现数据绑定功能 也就实现了View Model层所需的效果 是不是和EL表达式非常像?
3.3、完整的HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--1.导入Vue.js--script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script /head
body!--view层 模板--
div idapp{{message}}
/divscript typetext/javascriptvar vmnew Vue({el: #app,// MOdel数据data: {message: hello vue!}});
/script/body
/html3.4、测试
为了能够更直观的体验Vue带来的数据绑定功能 我们需要在浏览器测试一番 操作流程如下 在浏览器上运行第一个Vue应用程序 进入开发者工具 在控制台输入vm.message‘HelloWorld’ 然后回车 你会发现浏览器中显示的内容会直接变成HelloWorld 此时就可以在控制台直接输入vm.message来修改值 中间是可以省略data的 在这个操作中 我并没有主动操作DOM 就让页面的内容发生了变化 这就是借助了Vue的数据绑定功能实现的 MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定 以做到数据与视图的快速响应。
四、Vue基本语法
1、v-bind 我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联 所有东西都是响应式的。我们在控制台操作对象属性界面可以实时更新! 我们还可以使用v-bind来绑定元素特性! 用于绑定数据和元素属性 v-bind:属性 例如绑定a标签的href属性 div classappa v-bind:hrefurlclick me/a
/div 上代码 !DOCTYPE html
html langen xmlns:v-bindhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titleTitle/title/head
body!--view层模板--
div idappspan v-bind:titlemessage鼠标悬停几秒钟查看此处动态绑定的提示信息/span
/div!--1.导入Vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script script typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{message: 页面加载于 new Date().toLocaleString()}});
/script
/body
/html 你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了 它们会在渲染的DOM上应用特殊的响应式行为在这里该指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致”。 如果你再次打开浏览器的JavaScript控制台 输入app.message‘新消息’就会再一次看到这个绑定了title特性的HTML已经进行了更新。
2、v-if v-else
什么是条件判断语句就不需要我说明了吧以下两个属性! v-if v-else 上代码 !DOCTYPE html
html langen xmlns:v-bindhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titleTitle/title
/head
body!--view层模板--
div idapph1 v-ifokYes/h1h1 v-elseNo/h1
/div!--1.导入Vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{ok: true}});
/script
/body
/html测试 1.在浏览器上运行打开控制台! 2.在控制台输入vm.okfalse然后回车你会发现浏览器中显示的内容会直接变成NO 注使用v-*属性绑定数据是不需要双花括号包裹的
v-else-if v-if v-else-if v-else 注三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码 !DOCTYPE html
html langen xmlns:v-bindhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titleTitle/title
/head
body
!--view层模板--
div idapph1 v-iftypeAA/h1h1 v-else-iftypeBB/h1h1 v-else-iftypeDD/h1h1 v-elseC/h1
/div
!--1.导入Vue.js--script srchttps://unpkg.com/vue/dist/vue.js/scriptscript typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{type: A}});/script
/body
/html3、v-for
v-for
!DOCTYPE html
html langen xmlns:v-bindhttp://www.w3.org/1999/xhtmlheadmeta charsetUTF-8titleTitle/title/headbody!--view层模板--div idappli v-foritem in items !--在li里边li循环本例li循环两次--{{item.message}} !--若放在ul里边ul循环--/li/div!--1.导入Vue.js--script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script script typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{items: [{message:张三},{message:李四}]}});/script
/body
/html再加一个index属性index自带的属性 索引的意思
div idappli v-for(item,index) in items{{item.message}}---{{index}}/li
/div注items是数组item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似 上代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--view层模板--
div idappli v-for(item,index) in items{{item.message}}---{{index}}/li/div!--1.导入Vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{items:[{message:狂神说Java},{message:狂神说前端},{message:狂神说运维}]}});
/script
/body
/html[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTBI0lLh-1621221640205)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1621042533074.png)] 测试在控制台输入vm.items.push({message狂神说运维})尝试追加一条数据你会发现浏览器中显示的内容会增加一条狂神说运维. v-on监听事件 emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件 可以绑定到Vue中的methods中的方法事件! 上代码 !DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titleTitle/title
/head
body!--view层模板--
div idappbutton v-on:clicksayHiclick me/button
/div!--1.导入Vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
script typetext/javascriptvar vm new Vue({el:#app,/*Model数据*/data:{message: 你好},methods: { //方法必须定义在vue的methods对象中v-on事件 event要写上sayHi: function (event) {//this在方法中指向vue实例alert(this.message);}}});
/script
/body
/html 点击测试 Vue还有一些基本的使用方式 大家有需要的可以再跟着官方文档看看 因为这些基本的指令几乎我们都见过了一通百通!掌握学习的方式!
