本文是一篇关于Vue的简单入门教程，涵盖了Vue的基本概念、MVVM设计模式、数据双向绑定、事件处理和生命周期。通过HBuilderX创建项目，演示了如何在HTML中引入Vue.js并展示数据，以及如何使用v-on进行事件监听。文章最后简要介绍了Vue的生命周期。
目录
前言
本次分享的内容是Vue的简单入门。主要内容为，vue入门、vue双向数据绑定、vue的事件、vue的生命周期。
一、Vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。采用的是MVVM设计模式。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、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、展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title&
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
