vue_01基础

1. 原生DOM vs 函数库 vs 框架
2. 什么是Vue
3. 如何使用Vue
4. 绑定语法
5. 指令
6. 双向绑定

1. 原生DOM vs 函数库 vs 框架
   原生DOM: 优点: 跨平台好
   缺点: 繁琐
   函数库jQuery: 优点: 对原生DOM的每个API进行了简化
   缺点: 并没有简化开发的步骤
   框架Vue,AngularJS,React: 优点: 彻底简化了开发的步骤
   缺点: 需要转变观念
2. 什么是Vue:
   Vue是基于MVVM设计模式的渐进式的前端js框架
   渐进式: 可以有选择的逐步使用框架中的组件
   “全家桶”: 必须全盘使用所有组件
   前端js框架: 不需要nodejs，仅靠浏览器就可独立运行
   为什么后续需要nodejs？将Vue框架中浏览器不认识的新技术翻译为浏览器认识的ES5的对等标准——已经封装好了

何时: 侧重于以数据操作为主的前端项目开发

3. 如何使用Vue:
   下载: cn.vuejs.org
   最新稳定版: 2.6
   开发版: 未压缩的，包含完备注释和错误提示信息
   优: 可读性好
   缺: 体积大，不便于传输
   生产版: 代码经过压缩，删除了所有注释和错误提示信息
   优: 体积最小化，便于传输
   缺: 不便于学习和阅读
   使用Vue 2种方式:
   1. 下载独立的vue.js，在网页中引入:
   2. 用脚手架代码:

原理: MVVM设计模式:
旧的前端代码划分:
html: 定义网页的内容
css: 定义网页的样式
js: 增删改查，事件绑定
MVVM设计模式将前端内容重新划分: （步骤）

1. 界面(View): html+css
   为HTML添加了动态功能: 变量，if else, for
2. 模型数据(Model): 所有页面上需要的/可能发生变化的数据。集中定义在data={ 数据1:值1, 数据2:值2, … }
   往往模型数据都是ajax从服务端请求来的。
3. 控制器(ViewModel)：将视图View和模型数据(Model)绑定在一起。
   绑定: 监控视图和模型，始终保持模型数据与页面自动同步

控制器ViewModel中包含两大子系统: 
 1**. **响应系统:**** 监控模型中每个变量的变化
     只要有变量发生变化，立刻发出通知！
     本质: 将data中每个属性都提升为new Vue对象的访问器属性。只要修改new Vue对象的访问器属性，就可修改data中的变量。但是，同时会发出通知！
 2. **虚拟DOM树**: 
  什么是: Vue临时生成的仅保存可能变化的元素和属性的DOM树
    何时生成: new Vue()边扫描受监控的页面元素，边创建虚拟DOM树，仅保留可能发生变化的元素
    何时使用: 响应系统通知某个变量被改变时，告知虚拟DOM树。虚拟DOM树快速遍历自己，找到受影响的DOM元素，仅修改受影响的DOM元素
  总结: 虚拟DOM树: 
    1. 内容少，遍历极快
    2. 仅修改受影响的DOM元素的属性或内容
    3. ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200330203612145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgwNzU0NQ==,size_16,color_FFFFFF,t_70)

4. 绑定语法:
   {{变量名}} Interpolation 插值
   告知Vue框架，这里需要哪个变量
   {{}}中还可写一切正确的有返回值的js表达式:
   比如: 运算, 三目, 函数调用，访问数组元素，访问对象属性，模板字符串
   问题: 只能绑定内容，不能绑定属性和事件等…

5. 指令directive
   什么是: Vue新增的增强HTML功能的特殊属性
   为什么: HTML缺少动态原因所需的要素: 运算, 分支，循环
   包括:

6. 专门绑定属性值的指令: v-bind
   何时: 绑定属性值
   如何: <ANY v-bind:属性名=“js表达式”>
   v-bind: 让普通的属性的""中也可以执行js程序
   其实可省略: v-bind
   所以: 今后只要绑定属性都用 :属性名=“js表达式”

7. 事件绑定: v-on
   如何:
   HTML中: <ANY v-on:事件名=“处理函数名”>