开发者社区> program_黑> 正文

Vue.js ToDoList和MVVM模式

简介: 安装Vue插件 兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
+关注继续查看

安装Vue插件

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

更新日志

最新稳定版本:2.5.17

每个版本的更新日志见 GitHub

Vue Devtools

在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

直接用 <script> 引入

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

ToDoList

img_75cbe6bd36f6bb23ea6cc74c472cc69f.jpe
实现提交表单功能

v-model = "inputValue"  文本框的内容

v-on:click="handleBtnClick"    单击事件 触发handleBtnClick方法

v-for="item in list"  循环遍历list数组 获取data里的list

this.inputValue 表示vue实例中的inputValue

效果

img_54666b9d70218b82f7f2f2a068b8cc5a.jpe
在文本框中写入文本


img_f58b304c3e0be0f8e1126f1f2fab01d5.jpe
点击提交按钮  会动态添加到无序列表中 文本框的文本会清空

MVVM模式


img_804471c141b7a0deb8b8aa38405fb0f3.jpe
mvp设计模式


img_36f90194f4bf53ca7884300159931fc6.jpe
MVVM设计模式

也就是    M----Model   模型  

  V----View   视图

    VM------ViewModel   

下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。 

MVVM全称是Model-View-ViewModel

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟随变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可以是body,也可以是某个id所指代的元素。

DOMListenters和DataBindings是实现双向绑定的关键。DOMListers监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;DataBindings监听 Model层的数据,当数据发生变化,View层的DOM元素随之变化。

参考资料:

Vue官方API文档:https://cn.vuejs.org/v2/api/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
手把手教你Vue从零撸一个迷你版MVVM框架(二)
手把手教你Vue从零撸一个迷你版MVVM框架
14 0
手把手教你Vue从零撸一个迷你版MVVM框架(一)
手把手教你Vue从零撸一个迷你版MVVM框架
59 0
Vue 的 MVVM 理解以及计算属性的使用
MVVM:Model View ViewModel。学习概念的最好的方式是维基百科。
28 0
【Vue 快速入门系列】解读MVVM模型、数据代理
【Vue 快速入门系列】解读MVVM模型、数据代理
31 0
【前端】学习前端框架Vue中的MVVM之LiveData
上一篇学习了MVVM,这一篇来学习下LiveData知识点
28 0
【前端】学习前端框架Vue之MVVM
MVVM是一种客户端开发框架。MVVM是指数据层(Model),视图层(View),视图数据模型(ViewModel)。所以,MVVM是 Model-View-ViewModel 的缩写,即 模型-视图-视图模型。
53 0
Vue基本代码和 MVVM 之间对应关系|学习笔记
快速学习Vue基本代码和 MVVM 之间对应关系
31 0
Vue基本代码和MVVM之间对应关系|学习笔记
快速学习Vue基本代码和MVVM之间对应关系
37 0
+关注
program_黑
熟练使用Eclipse、MyEclipse、Idea等开发工具 熟练的使用Java语言进行面向对象程序设计,掌握常用的设计模式,有良好的编程习惯 熟悉基于JSP和Servlet的JavaWeb开发,熟悉三层架构 熟练掌握HTML+CSS+JavaScript+jquery+Aja
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载