Vue ,hello world!
1、框架介绍
1.1 MVVM框架
MVVM模式是由经典的软件架构MVC衍生来的。当Vue(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然View和ViewModel之间通过双向绑定(data-binding)建立联系。
MVVM框架:Angular.js、react.js、vue.js
- Model:负责数据存储,用数据来标识模型;(数据访问层)
- View:负责页面显示,用户所看到的界面
- View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示。ViewModel就是view和model连接器,view与Model通过ViewModel实现数据双向绑定。
取代了MVC模式的controller,或MVP模式的任命者(presenter)。数据驱动传达和数据绑定的通信。
使用MVVM模式有几大好处:
- 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
- 同步开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
- 可测试性。可以针对ViewModel来对界面(View)进行测试
1.2 MVC(Model-View-Controller)
-
简介
界面视图被分到了View,数据被分到了载体Moedel上有Model"携带",业务集中在Controller(控制器)中,而推动业务的时间由用户与view交互,通过view向controller发动。将内部数据与用户界面相分离,从而实现高效的代码复用和并行开发。 -
MVC一般流程:
view(界面)用户触发事件----controller(业务)处理业务,然后触发事件----更新model数据----model(带着数据)回到view-----view设计更新了 -
优点
- 高内聚:MVC可以在控制器上对相关操作进行逻辑分组。特定模型的视图也组合在一起
MVC将应用程序的各个组件分离,因此前端、后端开发能够在不同组件上并行工作,互不影响。后端设计人员可以设计数据结构以及用户如何与之交互,无需完成一个用户界面;前端开发人员能够在数据结构可用之前设计和测试应用程序的布局。 - 代码重用:通过独立的组件,开发人员能够在其他应用程序中快速的充用重用组件。
- 高内聚:MVC可以在控制器上对相关操作进行逻辑分组。特定模型的视图也组合在一起
1.3 MVP(Model-View-Presenter)
对MVC改进的思想是,切断View和model的联系,让view只和presenter(原controller)交互,减少再需求变化中需要维护的对象的数量。
MVVM比起MVP,MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式
2、Vue介绍
Vue.js:简单小巧的技术黑犀牛,渐进式技术栈,足应付任何规模的应用。组件化,模块化开发方式。
提供了现代Web开发中常见的高级功能,比如:
• 解耦视图,数据
• 可复用组件
• 前端路由
• 状态管理
虚拟DOM( Virtual DOM)
Vue核心概念:数据驱动,避免手动操作DOM,以便更多时间关注数据的业务逻辑,而不是DOM该如何渲染。
props传递数数据,events触发事件,和slot内容分发,构成了vue组件的3个API来源。
3、使用方法
1.1. 引入vue.js
开发版本下载地址
直接下载并在index.html文件中用<script>
标签引入vue.js
,Vue会被注册为一个全局变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
</body>
</html>
在开发环境下不要使用压缩版本,不然你会失去常见错误先关的警告。开发版本包含完整的警告和调试模式。
1.2 使用CDN
链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
1.3 NPM
Vue构建大型项目用NPM安装模块。
由于npm安装速度慢,一般使用淘宝的镜像及其命令cnpm,
npm install vue
1.4 命令行工具(CLI)
对Node.js和相关构建工具有一点的了解者使用,新手不推荐。
为单页面应用快速搭建繁琐的脚手架。