web前端三大框架:网站搭之vue建框架
ccwgpt 2024-10-11 11:10 36 浏览 0 评论
Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面(以操作数据改变页面，而jQuery是以操作节点来改变页面)，同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。
对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化;2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。
(截图来源：菜鸟教程)
引入vue.js的写法
Vue分为V层(视图层)和M层(数据层)，一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签进行编译，只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏;而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏;而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。
V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类(class)的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式(style)所接受的数据类型为对象。
V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。
除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中
通过脚手架来写项目的话，可用通过写组件，再将组件引入(注册)到另一个vue文件里拼接在一起，从而构建出一个页面。
(组件书写格式)
(组件整合)
(注册路由)
路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。
而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。
通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。
相关推荐
- 自己动手写Android数据库框架_android开发数据库搭建
-
http://blog.csdn.net/feiduclear_up/article/details/50557590推荐理由关于Android数据库操作，由于每次都要自己写数据库操作，每次还得去...
- 谷歌开源大模型评测工具LMEval，打通谷歌、OpenAI、Anthropic
-
智东西编译|金碧辉编辑|程茜智东西5月28日消息，据科技媒体TheDecoder5月26日报道，当天，谷歌正式发布开源大模型评测框架LMEval，支持对GPT-4o、Claude3.7...
- 工信部:着力推动大模型算法、框架等基础性原创性的技术突破
-
工信部新闻发言人今日在发布会上表示，下一步，我们将坚持突出重点领域，大力推动制造业数字化转型，推动人工智能创新应用。主要从以下四个方面着力。一是夯实人工智能技术底座。通过科技创新重大项目，着力推动大模...
- 乒乓反复纠结“框架不稳定”的三个小误区
-
很多球友由于对框架的认知不清晰，往往会把“框架不稳定”当成一种心理负担，从而影响学球进度，其典型状态就是训练中有模有样，一旦进入实战，就像被捆住了手脚。通过训练和学习，结合“基本功打卡群”球友们交流发...
- 前AMD、英特尔显卡架构师Raja再战GPU，号称要全面重构堆栈
-
IT之家8月5日消息，知名GPU架构师拉贾科杜里(RajaKoduri)此前曾先后在AMD和英特尔的显卡部门担任要职。而在今日，由Raja创立的GPU软件与IP初创企...
- 三种必须掌握的嵌入式开发程序架构
-
前言在嵌入式软件开发，包括单片机开发中，软件架构对于开发人员是一个必须认真考虑的问题。软件架构对于系统整体的稳定性和可靠性是非常重要的，一个合适的软件架构不仅结构清晰，并且便于开发。我相...
- 怪不得别人3秒就知道软考案例怎么做能50+
-
软考高级统一合格标准必须三科都达到45分，案例分析也一直是考生头疼的一门，但是掌握到得分点，案例能不能50+还不是你们说了算吗？今天就结合架构案例考点，分享实用的备考攻略～一、吃透考点，搭建知识框架从...
- UML统一建模常用图有哪些，各自的作用是什么?一篇文章彻底讲透
-
10万+爆款解析：9大UML图实战案例，小白也能秒懂！为什么需要UML？UML（统一建模语言）是软件开发的“蓝图”，用图形化语言描述系统结构、行为和交互，让复杂需求一目了然。它能：降低沟通成本避...
- 勒索软件转向云原生架构，直指备份基础设施
-
勒索软件组织和其他网络犯罪分子正越来越多地将目标对准基于云的备份系统，对久已确立的灾难恢复方法构成了挑战。谷歌安全研究人员在一份关于云安全威胁演变的报告中警告称，随着攻击者不断改进数据窃取、身份泄露和...
- ConceptDraw DIAGRAM:释放创意，绘就高效办公新未来
-
在当今数字化时代，可视化工具已成为提升工作效率和激发创意的关键。ConceptDrawDIAGRAM，作为一款世界顶级的商业绘图软件，凭借其强大的功能和用户友好的界面，正逐渐成为众多专业人士的首选绘...
- APP 制作界面设计教程:一步到位_app界面设计模板一套
-
想让APP界面设计高效落地，无需繁琐流程，掌握“框架搭建—细节填充—体验优化”三步法，即可一步到位完成专业级设计。黄金框架搭建是基础。采用“三三制布局”：将屏幕横向三等分，纵向保留三...
- MCP 的工作原理:关键组件_mcp部件
-
以下是MCP架构的关键组件：MCP主机：像ClaudeDesktop、GitHubCopilot或旅行助手这样的AI智能体，它们希望通过MCP协议访问工具、资源等。MCP主机会...
- 软件架构_软件架构师工资一般多少
-
软件架构师自身需要是程序员，并且必须一直坚持做一线程序员。软件架构应该是能力最强的一群程序员，他们通常会在自身承接编程任务的同时，逐渐引导整个团队向一个能够最大化生产力的系统设计方向前进。软件系统的架...
- 不知不觉将手机字体调大!老花眼是因为“老了吗”?
-
现在不管是联系、交友，还是购物，都离不开手机。中老年人使用手机的时间也在逐渐加长，刷抖音、看短视频、发朋友圈……看手机的同时，人们也不得不面对“视力危机”——老花眼，习惯眯眼看、凑近看、瞪眼看，不少人...
- 8000通用汉字学习系列讲座(第046讲)
-
[表声母字]加(续)[从声汉字]伽茄泇迦枷痂袈笳嘉驾架咖贺瘸(计14字)嘉[正音]标准音读jiā。[辨形]上下结构，十四画。会意形声字，从壴从加，加也表声。注：从壴，字义与鼓乐有关；从加，字义与...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- 知识框架图 (52)
- ppt框架 (55)
- 框架图模板 (59)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)