vue基础之1:Vue简介

ops/2024/11/30 0:03:34/

欢迎来到“雪碧聊技术”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

 


http://www.ppmy.cn/ops/137776.html

相关文章

实现实时CPS安全的动态目标防御

论文标题:Enabling Moving Target Defense for Real-Time CPS Security(实现实时CPS安全的动态目标防御) 作者信息: Rajarshi Mukherjee,弗吉尼亚理工大学,电气与计算机工程系,阿灵顿&#xf…

15分钟做完一个小程序,腾讯这个工具有点东西

我记得很久之前,我们都在讲什么低代码/无代码平台,这个概念很久了,但是,一直没有很好的落地,整体的效果也不算好。 自从去年 ChatGPT 这类大模型大火以来,各大科技公司也都推出了很多 AI 代码助手&#xff…

Vue 3 路由教程

Vue 3 路由教程 1. 路由基础概念 1.1 什么是路由? 路由是现代单页面应用(SPA)中管理页面导航的核心机制。在Vue 3中,我们主要使用vue-router库来实现路由功能。路由允许您在应用程序中无需重新加载整个页面就可以动态切换视图。 1.2 安装vue-router …

如何将 GitHub 私有仓库(private)转换为公共仓库(public)

文章目录 如何将 GitHub 私有仓库转换为公共仓库步骤 1: 登录 GitHub步骤 2: 导航到目标仓库步骤 3: 访问仓库设置步骤 4: 更改仓库可见性步骤 5: 确认更改步骤 6: 验证更改注意事项 如何将 GitHub 私有仓库转换为公共仓库 在软件开发领域,GitHub 是一个广受欢迎的…

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点:仅考虑所给样例,会误以为H和W两人的装车时间是一一对应的,那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…

|| 与 ??的区别

?? : 空值合并运算符, 用于在左侧操作数为 null 或 undefined 时返回右侧操作数 let name null // null 或者 undefinedlet defaultName defaultNamelet displayName name ?? defaultNameconsole.log(displayName) // defaultName || : 逻辑或,…

Wonder3D本地部署到算家云搭建详细教程

Wonder3D简介 Wonder3D仅需2至3分钟即可从单视图图像中重建出高度详细的纹理网格。Wonder3D首先通过跨域扩散模型生成一致的多视图法线图与相应的彩色图像,然后利用一种新颖的法线融合方法实现快速且高质量的重建。 本文详细介绍了在算家云搭建Wonder3D的流程以及…

如何利用蓝燕云零代码平台构建工程企业成本控制系统?

随着工程项目管理逐步走向数字化,企业对成本控制的精细化需求不断提升。利用蓝燕云零代码平台,可快速构建一套高效、智能的成本控制系统,实现从预算编制到分析决策的全流程管理。 一、核心功能模块 1. 预算与成本管理 预算编制:…