Vue.js 原理与开发概要

文章目录

Vue.js 是构建 Web 界面的渐进式 JavaScript 框架，通过简洁的 API 提供高效的数据绑定和灵活的组件系统，可用于开发 SPA(单页面应用) 网站。本文概述了 Vue.js 所依赖的 ECMAScript 概念，Vue.js 相比于同类产品的优势，总结了 Vue.js 的开发方法。

作者：王克锋
出处：https://kefeng.wang/2017/02/11/vuejs/
版权：自由转载-非商用-非衍生-保持署名，转载请标明作者和出处。

1.概述

Vue.js 首个版本发布于2014年2月。
官方文档：Vue.js 介绍

1.1 功能

易用: 已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活: 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效: 20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

1.2 作者

作者尢雨溪(Evan You)，1988年生，无锡人，高中毕业于上海复旦附中；
在美国完成大学学业(非计算机专业)，后在Parsons设计学院获得Design & Technology艺术硕士学位，曾任职于纽约Google Creative Lab；
2016年9月，以技术顾问的身份加入阿里巴巴 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。

1.3 同类产品对比

几个最重要的 JavaScript 开源框架：
对比其他框架
 Vue.js Is Good, But Is It Better Than Angular Or React?

1.3.1 Vue.js

官网: http://vuejs.org/
项目: https://github.com/vuejs/vue
作者尢雨溪(Evan You)，2014年发布，Github 中有 75k 个星(比流行的 jQuery 的 47k 还要多)。
Vue 是一个全新的框架，几乎没有任何历史包袱。它从 React/Angular 吸取经验和教训，
以更轻量、灵活、易学的方式提供解决方案，基于组件，能和Bootstrap完美集成。

1.3.2 jQuery

官网: https://jquery.com/
项目: https://github.com/jquery/jquery
作者 John Resig，2006年1月发布，Github 中有 47k 个星。使用MIT许可证授权。
全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。
Usage of JavaScript libraries for websites
最新版本体积: jquery-1.8.0.js 为 254KB, jquery-1.8.0.min.js 为 91KB。

1.3.3 React.js

官网: https://reactjs.org/
项目: https://github.com/facebook/react
来自 Facebook，2013年发布，Github 中有 82k 个星。
缺点是体积大，语法复杂，不灵活。有把霸王条款。

1.3.4 Angular

官网: https://angular.io/
项目: https://github.com/angular/angular
来自 Google，2009年发布，Github 中有 30k 个星。
缺点是体积大，语法复杂，不灵活。正在走向没落。

2.ECMAScript

JavaScript教程 - 廖雪峰

2.1 与 JavaScript 的关系

1995 年，Netscape 公司开发了 Navigator 浏览器，为了添加动态效果，该公司的 Brendan Eich 设计了 JavaScript 语言。
1996 年 11 月，Netscape 公司将 JavaScript 提交给国际标准化组织 ECMA，希望这种语言能够成为国际标准。
1997年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的。JavaScript 本身也已经被 Netscape 公司注册为商标。
ECMAScript 是语言标准，JavaScript 是其实现(当前微软实现了 JScript)。

2.2 ECMAScript 版本号

ECMAScript 1.0: 1997年；
ECMAScript 2.0: 1998 年 6 月；
ECMAScript 3.0: 1999 年 12 月，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承；
ECMAScript 4.0: 太过激进，流产未发布；
ECMAScript 5.0: 2009 年 12 月；
ECMAScript 5.1: 2011 年 6 月，并且成为 ISO 国际标准；
ECMAScript 6.0(ES6): 2015 年 6 月发布，成为国际标准，其目标是使得 JavaScript 语言成为企业级开发语言，规定每年6月份发布一个新版本，有年份作为版本。
ECMAScript 2015(ES2015): 2015 年 6 月发布，是 ES6 的首个版本；
ECMAScript 2016(ES2016): 2016 年 6 月发布；
ECMAScript 2017(ES2017): 2017 年 6 月发布。

2.3 官方文档

Mozilla 官网文档：JavaScript 参考文档、String

比如 String.startsWith() / String.endsWith() / 模板字符串就被标明是 ES2015 的标准。
特定版本的浏览器发布时，实现了当时的某个 ECMAScript 版本，所以如果使用 JavaScript 新规划接口，那就会造成不兼容。

2.4 浏览器之争

在Netscape设计出JavaScript后的短短几个月，JavaScript事实上已经是前端开发的唯一标准。
微软通过 Windows 中捆绑 IE，击败了 Netscape，微软认为IE6浏览器已经非常完善，几乎没有可改进之处，然后解散了IE6开发团队！
而Google却认为支持现代Web应用的新一代浏览器才刚刚起步，尤其是浏览器负责运行JavaScript的引擎性能还可提升10倍。
先是Mozilla借助已壮烈牺牲的Netscape遗产在2002年推出了Firefox浏览器，
紧接着Apple于2003年在开源的KHTML浏览器的基础上推出了WebKit内核的Safari浏览器，不过仅限于Mac平台。
随后，Google也开始创建自家的浏览器。他们也看中了WebKit内核，于是基于WebKit内核推出了Chrome浏览器，是跨Windows和Mac平台的。
并且，Google认为要运行现代Web应用，浏览器必须有一个性能非常强劲的JavaScript引擎，于是Google自己开发了一个高性能JavaScript引擎，名字叫V8，以BSD许可证开源。
支持HTML5的WebKit已经成为手机端的标准了，IE浏览器从此与主流移动端设备绝缘。

2.5 Node.js

很多语言虽然同时提供了同步IO和异步IO，但是开发人员一旦用了同步IO，他们就再也懒得写异步IO了，
但 JavaScript 则不然，因为 JavaScript 是单线程执行，不能进行同步IO操作，只能使用异步IO。
2009年，Ryan Dahl 正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。
Node第一次把JavaScript带入到后端服务器开发，加上世界上已经有无数的JavaScript开发人员，所以Node一下子就火了起来。

“Node上运行的JavaScript”相比“其他后端开发语言”有何优势？
最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。
通过模块化的JavaScript代码，加上函数式编程，并且无需考虑浏览器兼容性问题，直接使用最新的ECMAScript 6标准，可以完全满足工程上的需求。

3.开发准备

你可以查看安装教程来了解其他安装 Vue 的选项。
请注意我们不推荐新手直接使用 vue-cli，尤其是对 Node.js 构建工具不够了解的同学。
Vue.js 安装

3.1 浏览器要求

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。

3.2 引入

在开发时请用开发版本，遇到常见错误它会给出友好的警告。
开发版本: https://vuejs.org/js/vue.js
生产版本: https://vuejs.org/js/vue.min.js
https://cdn.jsdelivr.net/npm/vue

3.3 Vue Devtools

当使用 Vue 时，我们推荐同时在你的浏览器上安装 Vue Devtools，它允许你在一个更加友善的界面中审查和调试你的 Vue 应用。

4.基本功能

4.1 基本用法

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="vue.js"></script>
    <title>Vue.js 基本用法</title>
</head>

<body>

<div id="app" v-if="success">
    <ul>
        <li v-for="person in persons">#{{person.id}}: {{person.name}}</li>
    </ul>
    <input v-model="name"/> 将要新增“{{name}}”<br/>
    <button v-bind:title="button" v-on:click="submit">{{button}}</button>
</div>

<script type="text/javascript"><!--
var app = new Vue({
    el: '#app',
    data: {
        success: true,
        message: '处理成功！',
        persons: [
            {id: 3, name: '张三'},
            {id: 4, name: '李四'},
            {id: 5, name: '王五'},
        ],
        name: '赵六',
        button: "提交",
    },
    methods: {
        submit: function () {
            this.button = "提交中";
            // 提交至后台，接收响应数据
            app.persons.push({ id:6, name: this.name });
            // this.message += new Date().toLocaleString();
        }
    },
});
--></script>

</body>
</html>

4.2.组件化构建

先构造出小型、独立和通常可复用的组件，再使用组件构建大型应用。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

<div id="appx">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

<script type="text/javascript"><!--
// 组件
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var appx = new Vue({
  el: '#appx',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
});
--></script>

王克锋的博客

坚持学习、实践、总结，坚持原创。