Vue.js 实战教程 V2.x(2)Vue.js简介

2.1 Vue.js概述

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue.js官网的截图(2019年7月)

易用

会HTML、CSS、JavaScript就可以构建应用。

灵活

可以在一个库和一套完整框架之间自如伸缩。

高效

20kB运行大小,超快虚拟 DOM,最省心的优化

2.2与React对比

React官网的截图(2019年7月)

性能

React 和 Vue 都是非常快的。

优化

在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

HTML & CSS

在 React 中,一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达,现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。

向上扩展

Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。

最后,Vue 提供了 CLI 脚手架,能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型。React 在这方面也提供了 create-react-app。

向下扩展

React 学习曲线陡峭,在你开始学 React 前,你需要知道 JSX 和 ES2015,因为许多示例用的是这些语法。

就像 Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。

原生渲染

React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。

相应地,Vue 和 Weex 合作,Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用的组件。

2.3与Angular对比

Angular官网的截图(2019年7月)

TypeScript

Angular必须用 TypeScript 来开发。

在中小型规模的项目中,用 Vue 会是更好的选择。

性能

这两个框架都很快。

体积

在体积方面,一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。

灵活性

Vue 相比于 Angular 更加灵活。

学习曲线

要学习 Vue,你只需要有良好的 HTML 和 JavaScript 基础。

Angular 的学习曲线是非常陡峭的——作为一个框架,它的 API 面积比起 Vue 要大得多,你也因此需要理解更多的概念才能开始有效率地工作。当然,Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用;但不可否认的是,这也使得它对于经验不甚丰富的开发者相当的不友好。

欢迎观看视频教程:https://ke.qq.com/course/432961?tuin=36914f34,如有疑问,请加QQ群665714453交流讨论。 

原文地址:https://www.cnblogs.com/daqiang123/p/11368370.html

时间: 2024-07-29 14:32:27

Vue.js 实战教程 V2.x(2)Vue.js简介的相关文章

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

Vue.js 实战教程 V2.x(8)Class与Style绑定

8 Class与Style绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求. 8.1绑定HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness. 你可以在对象中传入更多属性来动态

Vue.js 实战教程 V2.x(7)计算属性和侦听器

7计算属性和侦听器 7.1计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护. 所以,对于任何复杂逻辑,你都应当使用计算属性. 基础例子 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMe

Vue.js 实战教程 V2.x(13)事件处理

13组件基础 13.1基本示例 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 组件是可复用的 Vue

Vue.js 实战教程 V2.x(5)Vue实例

5 Vue实例 5.1创建一个 Vue 实例 创建 Vue 实例: var vm = new Vue({ // ... }) 5.2数据与方法 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 data.a // =>

Vue.js 实战教程 V2.x(10)列表渲染

10列表渲染 10.1用 v-for 把数组对应为元素 <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

Vue.js 实战教程 V2.x(6)模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 6.1插值 var obj = { msg: 'Hello Vue.js', rawHtml: '<span style="color: red">This should be red.</span>' } new Vue({ el: '#app', data: obj }) <div id="app"> ... <

Vue.js 实战教程 V2.x(1)前端发展史

1.1 Web 1.0时代 1989年,英国科学家蒂姆·伯纳斯-李在欧洲核子研究中心工作时发明了万维网(WWW). 第一个网站的截图(图片来源:CERN) 1990年,HTML(Hyper Text Markup Language)1.0发布. 1993年,CGI(Common Gateway Interface)诞生. 1994年,HTML 2.0发布. 1994年,Netscape公司成立,发布了第一款商业浏览器Navigator. 第一款商业浏览器的截图 1995年,Netscape推出了

Vue.js 实战教程 V2.x(3)第一个Vue.js程序

假设你已了解关于 HTML.CSS 和 JavaScript 的知识. 3.1起步 创建一个 .html 文件,然后通过如下方式引入 Vue: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 3.2声明式渲染 Vue.js核心: <div id="app"> {{ message }} </div> var app = new V