Vue简单入门

目录

前言

一、Vue是什么？

二、MVVM 设计模式

三、vue入门

 1、vue的简单入门

 2、数据双向绑定

 3、vue的事件

四、vue的生命周期

总结

---

前言

        本次分享的内容是Vue的简单入门。主要内容为，vue入门、vue双向数据绑定、vue的事件、vue的生命周期。

---

一、Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。采用的是MVVM设计模式。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网：简介 | Vue.js (vuejs.org) 

二、MVVM 设计模式

MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

三、vue入门

        1、vue的简单入门

                1.1、HBuilderX中新建项目，创建html文件。导入vue.js

                        我在这里用的是cdn的方式。你也可以选择在官网下载，或者是在nodeJs里搭建。

        

         1.2、展示数据