vue 入门

1、基本认识vue

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
  • 移动优先。更适合移动端，比如移动端的 Touch 事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
  • Vue是一个渐进式的框架可以将Vue作为你应用的一 部分嵌入其中,带来更丰富的交互体验。
  • 开源，社区活跃度高
  • Vue有很多特点和Web开发中常见的高级功能
    • 解耦视图和数据.
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

2.安装

1、官网直接下载

　　开发版本：包含完整的警告和调试模式

　　生产版本：删除了警告，28.96kb min+gzip

2、CDN

　　使用https://unpkg.com/vue这个在线CDN

3、NPM

# 最新稳定版
$ npm install vue

 　　获取Vue后，直接使用script标签引入即可使用

<script src="vue.js"></script>    
<script src="https://unpkg.com/vue"></scrip

3.MVVM的介绍

MVC

  • M: Model 数据模型（专门用来操作数据，数据的CRUD）
  • V：View 视图（对于前端来说，就是页面）
  • C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM组成

  • MVVM ===> M / V / VM
  • M：model数据模型
  • V：view视图
  • VM：ViewModel 视图模型

优势对比

  • MVC模式，将应用程序划分为三大部分，实现了职责分离
  • 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

  • MVVM通过数据双向绑定让数据自动地双向同步

    • V（修改数据） -> M
    • M（修改数据） -> V
    • 数据是核心
  • Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

posted @ 2022-07-25 19:21  红领巾下的大刀疤  阅读(40)  评论(0)    收藏  举报
/* 看板娘 */