美文网首页Vue.js
Vue.js ToDoList和MVVM模式

Vue.js ToDoList和MVVM模式

作者: Program_黑 | 来源:发表于2018-10-21 21:13 被阅读224次

安装Vue插件

兼容性

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

更新日志

最新稳定版本:2.5.17

每个版本的更新日志见 GitHub

Vue Devtools

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

直接用 <script> 引入

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

ToDoList

实现提交表单功能

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

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

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

this.inputValue 表示vue实例中的inputValue

效果

在文本框中写入文本 点击提交按钮  会动态添加到无序列表中 文本框的文本会清空

MVVM模式

mvp设计模式 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.js ToDoList和MVVM模式

    安装Vue插件 兼容性 Vue不支持IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScri...

  • 1、Vue.js起步

    1.vue是什么? Vue.js官网Vue.js菜鸟教程 2.MVVM模式 MVVM即:Model-View-Vi...

  • 一.Vue.js起步

    1 Vue.js Vue.js官网 Vue.js菜鸟教程 2 MVVM模式 MVC:Model-Viel-Cont...

  • Vue.js(1)----MVVM模式

    MVVM模式 MVVM模式是Vue.js的核心,它是一个Vue实例。Vue实例可以作用某一个HTML元素上,这个元...

  • Vuejs之开发环境搭建

    Vue.js Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比...

  • Vue 基础

    Vue.js双向绑定的实现原理 MVC和MVVM模式 最简单的Vue应用 v-cloak v-bind 、v-on...

  • VUE重复

    1.写一个index.html页面 2.改变页面内容 3.实现todolist 4.MVVM模式 5.TodoLi...

  • Vue.js的简单使用

    vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js。 MVVM拆分解释为: Model:负责数据...

  • 常见面试题整理

    1.vue MVVM模式2、的作用 3、Vue.js引入组件的步...

  • vue面试问题

    1.MVVM模式和MVC模式 MVVM模式是Model-View-ViewModel的缩写。MVVM是一种设计...

网友评论

本文标题:Vue.js ToDoList和MVVM模式

本文链接:https://www.haomeiwen.com/subject/gcsizftx.html