Vue.js介绍

目录

一、 Vue.js是什么

二、 Vue.js优点 

三、 前提条件

四、 安装Vue

1.  直接用 script 标签 引入

2.  命令行工具 (CLI)

3. 其他方法或细节应用

五、声明式渲染

六、 理解什么是MVVM

MVVM模式的组成部分

MVVM优点


一、 Vue.js是什么

 Vue.js (vue读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、 Vue.js优点 

  1. 体积小 压缩后33K;
  2. 更高的运行效率基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM                               操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没                                 有真实的操作DOM,所以叫做虚拟DOM。
  3. 双向数据绑定让开发者不用再去操作dom对象,把更多的精力投入到业务逻辑上;
  4. 生态丰富、学习成本低:市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来
                                            即用实现快速开发!

 对初学者友好、入门容易、学习资料多;

三、 前提条件

  • 熟悉核心的 HTML, CSS 和 JavaScript 语言,了解终端/命令行。
  • Vue 组件设计成为由管理应用数据的 JavaScript 对象和映射到底层 DOM 结构的 html 模板语法组成的混合体。安装和使用的一些更高级的功能 Vue(如单文件组件或渲染函数),你将需要一个安装了 node 和 npm 的终端。

四、 安装Vue

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.  直接用 script标签 引入

要在现有站点中使用 Vue,可以通过

  • 生产环境版本,优化了尺寸和速度,建议您在站点上包含 Vue 时指定版本号,这样任何框架更新都不会影响您的网站。

 这种方法有一些局限性。要构建更复杂的应用程序,您需要使用 Vue NPM package。

2.  命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

3. 其他方法或细节应用

参考链接: vue.js 三种方式安装(vue-cli)_muzidigbig的博客-CSDN博客_vue.js安装

五、声明式渲染

传统命令式渲染

修改内部内容,要改一次,刷新一次网页才能更新结果。例如孩子要吃饭,对母亲说要吃蔬菜,母亲来喂菜;要吃肉,母亲来为肉,一段指令对应一个结果。

   

        123

   

   

 声明式渲染

孩子要吃饭,对母亲说“我饿了”,母亲会直接端着装了菜、肉、汤的碗来为孩子,一段指令接载了所有可能的结果。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:





Vue 测试实例 - 菜鸟教程(runoob.com)



{{ message }}

六、 理解什么是MVVM

MVVM是Model-View-ViewModel的简写。[1]它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。

Vue.js介绍_第1张图片

MVVM模式的组成部分

  • 模型
  • 模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。
  • 视图
  • 就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。
  • 视图模型
  • 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。
  • 绑定器
  • 声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素。


		
		
		
	
	
		

{{name}}

MVVM优点

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点

1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写。


vue学习资料:介绍 — Vue.js

你可能感兴趣的:(Vue,vue.js,前端,javascript)