JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。
ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被“鄙视”的脚本语言的前身。
随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。Angular全面，项目代码多；Vue轻便，针对性解决问题，拿来就用，开发存在局限性。新手可以从vue上手，再去了解react和angular。
Vue是我们国人开发，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。
Vue是一个用于构建用户界面的渐进式SPA单一页面框架。与其他庞大而单一框架不同的是，Vue从一开始就被设计为可逐步采用。
验证node.js 安装：
dos命令提示符下执行（有版本号即安装成功）：
node安装（v8.11.3，至少8以上）
node -v
npm安装（v5.6.0）
npm -v
参考博客：https://blog.csdn.net/weixin_53601359/article/details/115680033
安装 cnpm
cnpm是一个完整 npmjs.org 镜像，可以用此代替nodejs.org官方版本，同步频率目前为10分钟一次，以保证尽量与官方服务同步。（目的为了提高访问、下载速度）
查看当前配置的镜像源
npm config get registry
执行结果：
https://registry.npmjs.org/
或者
https://registry.npm.taobao.org/
npm切换到淘宝镜像方式（提高下载速度）：
npm config set registry https://registry.npm.taobao.org
直接使用淘宝镜像命令方式：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm版本，有版本号即安装成功（直接支持cnpm命令，和npm一样只是库不同）
cnpm –v
vue-cli 脚手架工具安装与配置（需要几分钟）
npm install vue-cli -g#安装vue-cli脚手架
npm uninstall vue-cli -g#卸载vue-cli脚手架
查看版本（有版本号即安装成功）：
vue --version# 2.9.6
vue -V
指定文件下开启cmd，project为自定义项目名称，不可使用大写
vue init webpack project
安装成功：
To get started:
cd project进入项目
npm run dev启动服务，ctrl+c停止
注意：端口号可能不同，默认为8080，如果发现端口占用npm会自动改变端口号，具体 以当前环境为准。
这个目录结构非常重要。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。
简单来说项目加载的过程是：
index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue
可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。
和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是，传统js机制操作的是页面，像html+css+js项目，大家会发现页面和页面里的数据混杂在一起。
而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。
简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。
MVC全名是Model-View-Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事 ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el : '#app',
data : {
message: "Hello Vue."
}
})
</script>
</html>
创建Vue匿名对象，直接参数就是一个对象，一个类似json格式的js对象，这样的代码结构更加简洁。
Vue对象的参数：
- el： 绑定到指定名称的html标签上
- data： 绑定的数据，相当于给html中使用的时候所传的值
使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。
如页面创建时，页面加载时，页面更新时，页面销毁时？
在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。
生命周期函数：
细分每个过程：
| 默认值 | 取值范围 |
|---|---|
| new Vue | 创建vue实例 |
| init events & lifecycle | 开始初始化 |
| beforeCreate | 组件刚被创建，组件属于计算之前，如data属性等 |
| init injections & reactivity | 通过依赖注入导入依赖项 |
| created | 组件实例创建完成，属性已绑定，此时DOM还未生成 |
| el 属性 | 检查vue配置，即new Vue()里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用v.$mount() |
| template | 检查配置中的template项，如果没有，则被绑定区域的el对象的outHTML（即整个#app DOM ，包括
和
标签）都作为被填充对象替换掉填充区域 |
| beforeMount | 模板编译、挂载之前 |
| create v$el and replace el | 编译、并替换了被绑定元素 |
| mounted | 编译、挂载 |
| befor update | 组件更新之前 |
| updated | 组件更新之后 |
| destroy | 当v.$destroy()被调用，开始拆卸组件和监听器，生命周期终结 |
组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。可以理解为组件是对HTML元素的扩展。它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。
Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。界面优美，浏览器兼容，事半功倍。
官网地址：
https://element.eleme.cn/#/zh-CN #首页
https://element.eleme.cn/#/zh-CN/component/layout #组件页
https://unpkg.com/browse/element-ui@2.15.1/ 组件下载地址
在Vue项目目录下运行CMD
npm i element-ui -D
将element-ui文件放到rc目录下：
包含：js脚本、css样式文件、.ttf、.woff字体文件
设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇就来自对经典设计模式的应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。
Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了“观察者设计模式”。
那什么是观察者设计模式呢？
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。
可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。
可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。
问题描述 有一种查询叫做前端远程搜索、模糊查询。饿了么自带两种方式可以做，一...
把下面代码拷贝到dreamweaver 的代码区域，预览时可以显示下面图片，实现了图片...
0、楔子 终于万粉了 总算熬过了冷启动阶段。 一万这个小目标看着很简单 但是实际...
文章目录 1. 无锁解决线程安全问题 2. CAS与volatile 3. 原子整数 4. 原子引用 4...
array_reverse (PHP 4, PHP 5, PHP 7) array_reverse—返回单元顺序相反的数组 ...
有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程...
jsp 开发之struts2中s:select标签的使用 1.第一个例子： s:select list="{'aa','...
问题描述： 情况是这样的，我需要在小程序中通过image标签显示三张我的图片，毫...
ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即...
从前到后找出连续两个负数的距离然后贪心枚举一下注意要特别判断最后的情况 因为...
