初识VUE

介绍

vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；Vue的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。

Vue是一套用于构建用户界面的渐进式JavaScript框架

vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期。
Vue一切是数据为核心，使用数据来驱动视图刷新，我们不建议去操作dom

组件化

Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。

MVVM

MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。
在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。

数据双向绑定

当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。

反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。

在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。

响应式 虚拟DOM

对于DOM来说，当HTML的一个元素（如div）需要响应数据更改时，会刷新整个页面，导致效率堪忧。

对于虚拟DOM，浏览器会将HTML文件转换为JS文件并复制一个额外使用（虚拟）。对于任何更改，虚拟DOM都将复制的JS与原始JS进行比较，只重新加载更改的部分，局部修改到真实DOM上。

在Vue中，每个绑定data属性的组件都有一个Watcher检测data属性的变化。一旦检测到改变，则重新渲染该组件，这就是响应式。

VUE可开发环境搭建

开发工具：VScode、webStorm

nodejs安装

• node.js安装（直接官网下载，下载msi安装程序）默认下一步安装即可
• 验证Node.js安装。打开命令行工具（CMD），输入node -v和npm -v命令来检查Node.js和npm是否正确安装并显示版本号

默认的全局的安装路径和缓存路径，npm安装模块或库(可以统称为包)常用的两种命令形式：

• 本地安装(local)：npm install 名称
• 全局安装(global)：npm install 名称 -g

修改包的全局的安装路径和缓存路径，注意设置node_global和node_cache文件夹的安全允许权限，以便写入、修改文件夹中的内容，我们鼠标右键文件夹→属性→安全

 npm config set prefix "D:\program\node\node_global"      
 npm config set cache "D:\program\node\node_cache"

环境变量path添加配置node_global

配置淘宝镜像：npm config set registry=https://registry.npmmirror.com/

安装cnpm、yarn包管理工具

npm install cnpm -g
npm install yarn -g

全局安装Vue CLI。Vue CLI是一种命令行工具，用于快速生成Vue项目的脚手架。
npm install -g @vue/cli

cmd.exe运行node

通过node命令运行js文件

js文件代码

var http = require('http');
var server = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello, JavaScript!');
res.end();
});
server.listen(1000);
console.log('Server running at http://localhost:1000/');

直接在cmd窗口中运行node name.js