> 文档中心 > 一、Vue简介及安装包

一、Vue简介及安装包


01. Vue.js基础入门

01. 初识

前端技术的发展

HTML:HTML主要用来编写网页的结构,例如表示超链接。

CSS:CSS样式包括颜色、大小、字体等,布局合理的页面效果。

JavaScript:JavaScript的功能主要包括实现页面逻辑、行为、动作等,用来动态操作元素的属性,主要是为页面提供交互效果,实现更好的用户体验。

jQuery:通过对JavaScript代码的封装,使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便,有效地提高了项目开发效率。

Vue:Vue通过虚拟DOM技术来减少对DOM的直接操作;通过尽可能简单的API来实现响应的数据绑定,支持单向和双向数据绑定。

什么是Vue

Vue(读音/Vjuː/,类似于View)是一套用于构建用户界面的渐进式框架
与其他大型框架相比,Vue被设计为可以自底向上逐层应用
Vue可以开发一个全新项目,也可以将Vue引入到一个现有的项目中

在这里插入图片描述

Vue的基本工作原理图

官方解释:Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

渐进式的理解

渐进式就是Vue能够为用户提供更多的选择,没有强制用户的意思;

渐进也可以理解为一步一步的意思,大概意思就是使用Vue的时候,并不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分;

对“渐进式”这三个字的理解:Vue渐进式-先使用Vue的核心库,再根据你的需要的功能再去逐渐增加加相应的插件。 在我看来,渐进式代表的含义是:主张最少。

在这里插入图片描述
声明式渲染和组建系统是Vue的核心库所包含内容,而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立,你可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。

自底向上逐层应用的理解

由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

MVVM模型

  • MVVM(Model-View-ViewModel)是对 MVC(Model-View-Control)和 MVP(Model-View-Presenter)的进一步改进。

在这里插入图片描述

  • MVVM 将数据双向绑定(data-binding)作为核心思想,View 和 Model 之间没有联系,它们通过 ViewModel 这个桥梁进行交互。
  • Model 和 ViewModel 之间的交互是双向的,因此 View 的变化会自动同步到 Model,而 Model 的变化也会立即反映到 View 上显示。
  • 当用户操作 View,ViewModel 感知到变化,然后通知 Model 发生相应改变;反之当 Model 发生改变,ViewModel 也能感知到变化,使 View 作出相应更新。

mvc、mvp、mvvm三种设计模式的区别:MVC、MVP、MVVM的区别和联系(精讲版) (biancheng.net)

Vue的优势

轻量级:Vue简单、直接,所以Vue使用起来更加友好
数据绑定:数据驱动视图,视图也可以驱动数据
指令:指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为
插件:插件用于对Vue框架功能进行扩展

02. 搭建环境

软件安装包集合

03. webpack打包工具

31戒烟网