【Vue】一、什么是Vue.js

北城小林

已于 2022-12-22 16:11:17 修改

阅读量403

点赞数

分类专栏： 09_前端文章标签： vue.js 学习 javascript

于 2022-12-22 16:10:09 首次发布

本文链接：https://blog.csdn.net/weixin_43333483/article/details/128409940

版权

09_前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

后端程序员的vue学习之路

一、 What is Vue.js?

一、 What is Vue.js?

Vue.js（读音/vju:/, 类似于view），官方的定义：Vue.js是一套用于构建用户界面的JavaScript渐进式框架；

1、渐进式怎么理解？

Vue.js的核心组件只是一个js视图库，只提供了最核心的组件和双向数据绑定功能，没有做更多的额外工作，也就是你可以只把Vue.js的核心部分引入到项目中代替jQuery，其它部分你不需要引入，如果还需要其他功能，Vue.js周边有很多组件供你使用，比如要使用ajax，那么根据你的需要去逐渐增加相应的插件即可；
所以渐进式，即最少的主张；
Vue.js的核心只关注视图层，用于构建用户界面，也就是说Vue.js是对页面进行操作处理的前JavaScript库，Vue.js也可以与其它第三方库或既有项目整合，比如在一些老项目中加入Vue.js，比如在使用了Vue.js的情况下，你再加入jQuery也是可以的；
Vue.js生态 = Vue.js核心 + 周边的组件（插件）；
通过Vue.js生态，我们能开发非常复杂的前端页面应用；
Github：https://github.com/vuejs
英文官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/
作者：尤雨溪（中国.江苏.无锡人）

2 Vue.js发展历史

2013年，在Google工作的尤雨溪，受到Angular的启发，开发出了一款轻量框架，最初命名为Seed (种子)；
2013年12月，更名为Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0；
2014.01.24，Vue正式对外发布，版本号是 0.8.0；
2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后重要的版本都会有自己的代号；
2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用Vue，Vue在JS社区也打响了知名度；
2015.10.26，1.0.0发布，代号：Evangelion是Vue历史上的第一个里程碑，同年，vue-router、vuex、vue-cli相继发布，标志着Vue从一个视图层库发展为一个渐进式框架；
2016.10.01，2.0.0发布，是第二个重要的里程碑，它吸收了React的虚拟Dom方案，还支持服务端渲染，自从Vue 2.0 发布之后，Vue就成了前端领域热门技术；
2019.02.05，Vue 发布了 2.6.0，这是一个承前启后的版本，在它之后，将推出3.0.0；
2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，当时还处于测试状态；
2020.09.18，正式发布了Vue 3.0，https://github.com/vuejs/vue-next；

3 Vue.js版本的选择

Vue 1.x，Vue2.x，Vue3.x；
理论上应该是学最新的，不过目前Vue3还不推荐用于生产项目，周边生态还需要时间完善。
vue3是2020年9月18号发布的正式版本，尤雨溪在发布会上说，建议大家先不要在生产项目中使用，原因是因为周边的UI库等还没有跟上；
所以目前要做项目的话，建议还是vue2，而且工作中肯定有需要维护老项目，老项目也基本是vue2，不过Vue3我们也要开始学，等Vue3的生态完善了，就可以开始在项目中使用，Vue3 和 Vue2 基础语法没什么变化，很多东西是一样的，Vue3也有一些新的变化，
前端三大框架：Angular.js、React.js、Vue.js；
比较：https://cn.vuejs.org/v2/guide/comparison.html
https://index.baidu.com/v2/main/index.html#/trend/react?words=react,vue

4 Vue.js学习的前置知识

HTML
CSS
JavaScript
JSON
Node.js（了解）

5 Vue的浏览器支持

Vue不支持IE8及以下版本，因为Vue使用了IE8不支持的ECMAScript 5特性，所有兼容ECMAScript 5的浏览器都可以运行vue；
查看浏览器ECMAScript 5兼容情况：https://caniuse.com/es5
ECMAScript是一个脚本语言标准，javascript则是基于这个标准实现的脚本语言；
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。我们把它可以理解为是javascript的一个标准,但实际上javascript是ECMA-262标准的实现和扩展；
了解一下历史，javascript于1996年发布了第一版，当时的名字其实不叫javascipt，而是叫livescript，不过发布之后一直不温不火，正好这个时候sun公司推出来了一个面向对象的语言—Java，Java拥有很好的跨平台特性，一处编写处处执行，很快得到了市场的认可；
为了蹭Java的热度，livescript的母公司Netscape，也就是网景公司，就将livescript改为javascript，事实证明，这次名字改的非常明智；
javascript的火爆引起了微软公司的注意，他们很快也推出了Jscript脚本语言，以此来抗衡Netscape公司，并且当时还有一门浏览器脚本语言，叫ScriptEase，这样市场上就有了三种脚本语言，并且各个语言各有特色，互不兼容；
1997年，Netscape给欧洲计算机制造商协会(European Computer ManufacturersAssociation，简称ECMA)提交了一个草案，要求根据javascript来制定一个浏览器脚本语言标准，ECMA邀请了Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了一个技术委员会—第 39 技术委员会(TC39)，共同商讨制定了一个脚本语言的规范：ECMAScript，各个脚本语言必须按照规范来实现和约束自己的功能，
当然这个规范也是不断发展的，第一版规范叫做：ECMA-262，现在则以es+年份来命名，基本每年发一次新规范；
ECMAScript 1，1997年06月首版
ECMAScript 2，1998年06月格式修正，以使得其形式与ISO/IEC16262国际标准一致
ECMAScript 3，1999年12月
ECMAScript 4，2007年，发布了草案，未正式完成…，新增的功能争议比较大；
ECMAScript 5.0（ES 5，2009年12月）
ECMAScript 2015 es6 2015年6月17日发布
ECMAScript2016 es7 2016年6月19日发布
ECMAScript2017 es8 2017在7月12日
ECMAScript 2018 es9 2018年 6 月底
ECMAScript 2019 ES10 草案 2019/02/21

6 Vue.js开发工具

Visual Studio Code、WebStorm、HBuilder、IntelliJ IDEA+Vue.js插件、Sublime Text …；
我们选择使用Visual Studio Code；
官网：https://code.visualstudio.com/
官方下载：https://code.visualstudio.com/Download
我选择下载的是zip压缩包，解压即完成安装，双击解压后的文件夹下的Code.exe启动；

1、安装简体中文插件，如果你习惯用英文也可以不安装中文插件；
Chinese (Simplified) Language Pack for Visual Studio Code
2、安装Live Server插件，不安装也是可以的；
Live Server是一个具有实时加载功能的小型服务器，可以使用它来加载html/css/javascript，但是不能用于页面的最终部署，也就是说我们可以在项目中使用live-server作为一个实时服务器实时查看开发的网页或项目效果，测试使用；
3、安装Open In Browser插件，可以右键文件，直接在浏览器打开；
4、切换vscode颜色主题：

5、注释快捷键：alt+shift+a
6、格式化代码：Shift + Alt + F
7、设置字体大小，左下角的设置图标 --> 设置 --> 文本编辑器 --> 字体
8、安装HTML Boilerplate插件，自动生成html代码整体结构；
9、浏览器安装vue-devtools插件；
官网：https://devtools.vuejs.org/
vue-devtools是一款浏览器扩展插件，用于调试vue.js应用，可以极大地提高我们的调试效率，vue-devtools的安装可以从chrome（需要翻墙）、火狐商店直接下载安装，非常简单；
也可以手动安装，我们提供了一个vue-devtools-5.3.4.crx，直接拖到浏览器里面即可；
当我们浏览器添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发人员工具中会多出vue一栏，点击之后就可以看见当前页面vue对象的一些信息；
在这里插入图片描述

10、安装vuehelper插件，可以自动提示vue代码；