什么是vue？
官方给出的概念：Vue是一套用于构建用户界面的前端框架。
vue官方提供了构架用户界面的一整套解决方案（俗称vue全家桶）：
vue（核心库）
vue-router（路由方案）
vuex（状态管理方案）
vue组件库（快速搭建页面UI效果的方案）
vue官方提供了辅助vue项目开发的一系列工具：
vue-cli（npm全局包，一键生成工程化的vue项目 - 基于webpack、大而全）
vite（npm全局包，一键生成工程化的vue项目，小而巧）
vue-devtools（浏览器插件：辅助调试的工具）
vetur（vscode插件，提供语法高亮和智能提示）
Vue的两种使用方法：
1、可以通过脚手架搭建项目，注意
⑴. Vue脚手架版本并非Vue版本
⑵. Vue有官方脚手架vue-cli，还有其它非官方脚手架，比如：webpack-simple
2、可以使用传统方法，在html文件中引入vue.js，再搭建项目（此方法虽行的通，但几乎没人用）
Vue使用mustache模板引擎和比较高效的diff算法
渲染采用虚拟DOM树的概念
简而言之：Vue为了提高渲染效率，把模板编译成为虚拟DOM树，然后再转化生成真实DOM。
虚拟DOM的好处是，当数据变动时，将重新编译生成新虚拟DOM树，然后使用diff算法前后两棵树对比，仅将差异部分反映到真实的DOM中，这样可以最小程度改动DOM，提升渲染效率
提升Vue效率的两个方法：
1、减少新的虚拟DOM的生成
2、减少真实DOM的改动，保证对比之后，只有必要的节点发生变化
Vue提供多种方式生成虚拟DOM树（新手可理解为：Vue有多种渲染模板的方法）：
1、在挂载内部直接写vue代码，也就是传统HTML+JS的写法（先做好模板，然后通过js代码赋值），此时将使用元素的outerHTML作为模板；
2、在实例化Vue对象中的template配置中写代码；
3、在实例化Vue对象中的render配置中，用函数直接创建虚拟节点，此时完全脱离模板，将省略编译步骤
上面三种的优先级顺序：render > template > outerHTML
注意：模板只能有一个根节点，虚拟节点树必须是单根的，diff算法决定了，只能由真实DOM和虚拟DOM两棵树对比
使用Vue时，首先使用new Vue({})进行实例化，实例化vue对象后，vue下的data、methods等，都会被提取到vue实例中，提取的过程被称为注入
注入的目的：
1、完成数据响应式
2、绑定this
Vue怎么知道数据被更改
Vue2.0是通过ES5的Object.defineProperty方法完成数据响应式
Vue3.0是通过ES6的Class Proxy完成数据响应式
Class Proxy效率高
Object.defineProperty有缺陷，有些情况下无法感知新增属性，比如：
1、渲染页面时，某个变量并没有被定义，在页面渲染完成后通过程序或其它方式定义变量并赋值，无法完成数据响应式
2、事先定义了一个空对象，渲染页面时，使用了此对象中不存在的一个变量，在页面中动态对此对象添加这个变量，无法完成数据响应式
删除也是如此
体验Vue（outerHTML模板）
<!-- vue是渐进式的，并不要求整个网站全部使用vue，可以只在某个区域使用vue的功能 -->
<!--↓↓↓↓↓↓ vue控制的界面模板 ↓↓↓↓↓↓-->
<div id="app">
<!-- vue使用mustache模板引擎 -->
<h1>系统名称是：{{title}}</h1>
<!-- 使用v-for循环遍历 -->
<ul>
<!--
v-for参数：
item 循环数组每一项
i 下标
-->
<li v-for="(item,i) in products">
商品名称：{{item.name}}，
<button v-if="item.num>0" @click="minus(item)">-</button>
<span v-if="item.num>0">数量：{{item.num}}</span>
<span v-else>没库存</span>
<button v-if="item.num>0" @click="item.num++">+</button>
<button @click="del(i)">删除此项</button>
</li>
</ul>
</div>
<!--↑↑↑↑↑↑ vue控制的界面模板 ↑↑↑↑↑↑-->
<script src="./vue.js"></script>
<script>
var products = [
{name: '苹果', num: 10},
{name: '香蕉', num: 15},
{name: '橘子', num: 20}
]
var methods = {
minus(product){
product.num = product.num - 1 < 0 ? 0 : product.num - 1;
},
del(index){
//this 表示 vm 实例
this.products.splice(index,1);
}
}
//vm：vue实例
var vm = new Vue({
//配置
el: "#app", //css选择器
data: {
//和界面相关的数据
title: '库存管理系统',
products: products
},
methods: methods
});
</script>
15601023311
