欢迎来到“雪碧聊技术”CSDN博客!
在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在“雪碧聊技术”与您共同成长!
目录
一、Vue简介
1、什么是Vue?
①Vue:一套用来构建用户界面的渐进式JavaScript框架。
②什么叫“构建用户界面”?
③什么叫做“渐进式”?
2、谁开发的Vue?
3、vue的地位
4、vue的特点
①采用组件化模式,提高代码复用率、且让代码更好维护。
举例:理解“组件化”的含义
②声明式编码,让编码人员无需直接操作DOM,提高了开发效率
举例:理解“声明式”的含义
③使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点
举例:理解虚拟DOM、Diff算法的含义
5、学习Vue之前,要掌握哪些JavaScript基础知识?
①ES6语法规范(如:解构字符串、模板字符串、箭头函数等等)
②ES6模块化(如:默认暴露、分别暴露、统一暴露、import、export等等)
③包管理器(会一个就行,如:npm)
④原型、原型链(这是重点,不懂这个无法理解很多vue原理)
⑤数组常用方法
⑥axios
⑦promise
一、Vue简介
1、什么是Vue?
①Vue:一套用来构建用户界面的渐进式JavaScript框架。
②什么叫“构建用户界面”?
就是把具体的数据,渲染到用户界面上。
举例:
③什么叫做“渐进式”?
- 如果你的项目很简单,那么可以只引入一个轻量小巧的核心库。
- 如果你的项目很复杂,那么你可以引入各式各样的Vue插件。
2、谁开发的Vue?
作者:尤雨溪。
3、vue的地位
后起之秀,生态完善,已然成为国内前端工程师必备技能。
4、vue的特点
①采用组件化模式,提高代码复用率、且让代码更好维护。
举例:理解“组件化”的含义
一个组件,就是一个vue文件。
如下图,将整个页面分成了3个组件,每个组件都对应一个vue文件。
②声明式编码,让编码人员无需直接操作DOM,提高了开发效率
举例:理解“声明式”的含义
如果我们想把下图中的数据,放入容器,在渲染到页面,有两种编码方式:命令式编码 / 声明式编码。
可见图中,命令式编码就是html那种,原生的DOM代码。而声明式编码,是Vue推出的一种通过Vue指令(如v-for)就完成DOM操作的编码。
类比:命令式编码,就等于老师让小明去倒水,先让他走过去,然后蹲下,然后拿起水杯,然后走过来,然后把水杯给老师。
而声明式编码,就等于老师咳嗽一声,说嗓子不舒服,然后小明就心领神会,自己就自动把水杯拿过来了。
可见,此时需要老师和小明非常有默契,才能做到第二种情况。
因此,我们要想学好声明式编码,也就必须和vue有默契,具体的办法就是学好一个个的Vue指令。
③使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点
举例:理解虚拟DOM、Diff算法的含义
之前html直接通过标签,就能生成真实DOM。
而vue还需要经过一层虚拟DOM,这是为什么?
因为在新数据来临时,生成新的虚拟DOM后,会和原来的虚拟DOM进行对比,这个对比的过程就叫做“Diff”,对比用到的算法就叫做“Diff算法”。规则是:如果发现某些DOM一模一样,那么就不动它们,而是只渲染之前没有的DOM到页面。就拿上图举例,张三、李四、王五对应的DOM之前都有,那就不动了;而赵六对应的DOM,之前没有,因此只渲染赵六即可。
5、学习Vue之前,要掌握哪些JavaScript基础知识?
①ES6语法规范(如:解构字符串、模板字符串、箭头函数等等)
②ES6模块化(如:默认暴露、分别暴露、统一暴露、import、export等等)
③包管理器(会一个就行,如:npm)
④原型、原型链(这是重点,不懂这个无法理解很多vue原理)
⑤数组常用方法
⑥axios
⑦promise