1~5

1.原生DOM vs 函数库jQuery vs 框架vue

原生DOM(优点:跨平台好  缺点:繁琐)

函数库jQuery(优点:对原生DOM的每个API进行了简化 缺点:并没有简化开发步骤)

框架Vue(优点:彻底简化了开发的步骤 缺点:需要转变观念)

2.什么是Vue

Vue是基于MVVM设计模式的渐进式的前端js框架

渐进式:可以有选择的逐步使用框架中的组件

"全家桶":必须全盘使用所有组件

前端js框架:不需要nodejs,仅靠浏览器就可以独立运行

为什么脚手架中要使用nodejs?编写Vue项目时,可能会用到新技术,nodejs能将Vue框架中浏览器不认识的新技术翻译为浏览器认识的ES5的对等标准----已经封装好了

使用场景:侧重于以数据操作为主的前端项目开发(生活中的绝大多数的项目都是以数据为主,游戏不是以数据为主,是以效果和交互为主,所以Vue的使用极其广泛)

3.如何使用Vue

下载:  https://cn.vuejs.org/

版本: https://cn.vuejs.org/v2/guide/installation.html  (#更新日志)中可以查看最新版本

(当前最新稳定版本：2.6.10)  2019年6月3日

开发版 vs 生产版(学习和阅读建议用开发版,项目中使用建议用生产版):

开发版:未压缩的,包含完整注释和错误提示信息  vue.js

优点:可读性好

缺:体积大,不便于传输

生产版:代码经过压缩,删除了所有注释和错误提示信息  vue.min.js

优:体积最小化,便于传输

缺:不便于学习和阅读

使用Vue的2种方式:

1.下载独立的vue.js,在网页中引入:

(https://cn.vuejs.org/v2/guide/installation.html),(#更新日志)中

选择"开发版本"或"生产版本",右键"链接另存为"下载

2.用脚手架代码:

4.Vue的原理

先看一个案例:实现点击button,button上的数字+1

旧的前端划分:(js职能太集中了,html和css功能太少了)

html:定义网页的内容

css:定义网页的样式

js:增删改查,事件绑定

MVVM设计模式将前端内容重新划分:(也是Vue的使用步骤)

1.做界面(View):html+css

为HTML添加了动态功能,变量,if else,for...

2.模型数据(Model):(往往模型数据都是ajax从服务端请求来的)

所有页面上需要的/可能发生变化的数据,集中定义在data={数据1:值1,数据2:值2,...}

3.控制器(ViewModel):

将视图View和模型数据(Model)绑定在一起

注意:绑定就是监控视图和模型,始终保持模型数据与页面自动同步

控制器怎么监控界面和内存的变化保持一致?

因为控制器中包含两大子系统:

1.响应系统:监控模型中每个变量的变化

只要有变量发生变化,立刻发出通知!

本质:将data中每个属性(和methods中的每个方法)都提升为new Vue对象的访问器属性,只要修改new Vue对象的访问器属性,就可修改data中的变量,同时,会向外发出通知!

2.虚拟DOM树:Vue临时生成的仅保存可能变化的元素和属性的DOM树

何时生成:new Vue()边扫描受监控的页面元素,边创建虚拟DOM树,仅保留可能发生变化的元素

何时使用:响应系统通知某个变量被改变时,告知虚拟DOM树.虚拟DOM树快速遍历自己,找到受影响的DOM元素,仅修改受影响的DOM元素

虚拟DOM树的特点:

1.精准地改变变化的那一点,内容少,遍历极快

2.仅修改受影响的DOM元素的属性或内容

5.绑定语法  {{}}

{{变量名}} 告知Vue框架,这里需要哪个变量

{{}}中还可以写一切正确的有返回值的js表达式

比如:运算,三目,函数调用,访问数组元素,访问对象属性,模板字符串

问题:只能绑定内容,不能绑定属性和事件等