初学vuejs

简介: 初学vuejs的一些理解和感悟

现在的前端,各种框架各种语言层出不穷,其目的都是为了解决问题而出现的,在越来越发达的移动端上当然也少不了框架的应用了,其中用的最多也最出名的三大框架就是Angular,react 和vue了,vue算是后起之秀了,但是发展势头要高于前两者。很重要的原因是它具有如下特点: (1)简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 组件化。
我没有使用过Angular和react,但是我看了下他们的文档,相比之下,我选择了vue,对于我这种小白来说,很适合,而且官方文档https://cn.vuejs.org/v2/guide/ 上说的很清楚,它是很容易上手的,对于有点前端知识的小白来说,使用它是不错的一个选择。

我们先来看看它的循环指令,你就会觉得它确实很简单也很方便。我们在渲染页面过程中碰到循环时一般都是采用字符串的拼接来解决的,如果循环列表的内容不是很多那还好,如果列表中有很多内容,并且内带有很多隐藏的信息,比如name啊,id啊等等时,我一般会使用data-来处理如:data-id,data-name 这时,拼接字符串就有点难受了,一不小心少点什么引号,加号的,那就不行了,特别的注意变量和字符之间的连接,如'<div class="items" data-id="'+xx变量+'">' 不能够直接写 '<div class="items" data-id='+xx变量+'>' 不然结果会有影响。而且拼完后,看着一长串,一长串的字符就感觉不太舒服,不够优雅。但是当我看到vue中的 v-for 指令时,我就感觉这个太好了,有种让我眼前一亮的感觉。简洁而强大,如

image

其渲染到页面的结果为

image

v-for 指令需要使用 item in items形式的特殊语法,items 是源头,是数据数组并且 item 是数组元素迭代的别名,就是每个数组中的每一个元素。在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。如

image

其渲染到页面的结果为

image

还有v-bind 指令指绑定某一个dom的属性值,当其属性值改变时,则其dom元素中的属性值也会随之改变,如
<p v-bind:name="changeName"> 如果在 var app = new Vue({ el: '#app', data: { changeName:"gsben"}}) 的data中改变changeName的值,则p标签name的值会马上改变,这就是vue的亮点,永远是数据驱动视图,结构非常清晰。还有v-on,v-if,v-show等等指令,其语法简单,通俗易懂,还有简明的语法糖。

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

这些简单而强大的指令可以很愉快,并且很优雅的解决我们的页面渲染问题,让我们将更多的时间专注于业务逻辑上。看花容易绣花难,做几个dome是没问题的,但是要我们熟练的,灵活的运用这些指令在各个业务场合中,平常还是得多练,练的越多,对其的理解就越深。

当然,vue还远远不止这些,更精彩的还在后面。。。

目录
相关文章
|
17天前
|
人工智能 JSON API
全网刷屏的 Jev 模型正式开放!一手实战测评 + 保姆级教程
全网爆火的 Jev 模型是什么?有什么用?怎么使用?怎么接入 AI 编程工具?效果真的好么?傻子可懂的 Jev 保姆级实战教程 + 项目实战测评来啦
8486 24
|
16天前
|
人工智能 并行计算 PyTorch
秋叶 ComfyUI 2026 整合包 v3.2 完整部署教程:Python 3.13 + Torch 2.13 全栈升级
秋叶aaaki ComfyUI 2026年8月整合包v3.2正式发布!全面升级Python 3.13.11、PyTorch 2.13.0+cu130及ComfyUI v0.30.2,原生支持MiniMax H3、Wan 2.2、Qwen-Image-2.1等2026主流音视频/图像模型,解压即用,无需环境配置。
2843 14
|
15天前
|
人工智能 测试技术 API
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
Jev是TypeSafe AI推出的“系统一模型”,不生成文本,专做毫秒级结构化决策:Choice(多选)、Score(打分)、Noul(是非概率)。响应快193倍、成本低444倍,适合工单路由、内容审核、测试定级等高频判断场景。
2023 4
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
|
14天前
|
人工智能 编解码 并行计算
MiniMax-H3 一键整合包技术文档:8G 显存运行 AI 漫剧制作 —— 角色替换 / 动作迁移 / 文图生视频部署与调参指南
MiniMax H3 是 MiniMax 开源的全模态视频生成模型,支持文/图/音/视多条件输入,输出最高2K、15秒带双声道音频视频。本文档详述其Int8量化版在8GB显存下的本地一键部署、三段式工作流(EDIT/REPLACE/CONTINUE)、参数调优及常见问题排查。(239字)
|
10天前
|
人工智能 Linux 开发者
【2026国内使用】Codex安装过程一篇讲透(Win/Mac/Linux全支持)
Codex是OpenAI推出的AI编程智能体,可读取本地项目、理解需求并自动修改代码。支持桌面GUI、命令行(CLI)及VS Code/Cursor插件三种形态,覆盖可视化操作、终端高效开发与编辑器无缝集成场景,助开发者用自然语言驱动编码全流程。(239字)
【2026国内使用】Codex安装过程一篇讲透(Win/Mac/Linux全支持)
|
4天前
|
人工智能 JSON Linux
【全网最详细】ComfyUI使用教程:下载+本地部署+配置+工作流搭建一篇搞定(2026最新版)
ComfyUI是一款免费开源的本地AI绘图工具,采用节点式工作流设计,支持文生图、图生图、局部重绘、放大、换脸等多种功能。可离线运行,依赖显卡加速,无需联网。支持自定义流程保存与分享,插件生态丰富,适合进阶用户。(239字)
|
10天前
|
人工智能 JSON 编解码
【2026最新版】ComfyUI本地部署教程,新手也能看懂!
ComfyUI是本地运行的AI绘画工具,采用节点式工作流设计:通过拖拽连接“加载模型”“提示词编码”“采样”“解码”等模块,实现高度可控的文生图。新手推荐使用秋叶整合包,一键启动、内置模型管理与插件安装器,轻松上手。(239字)

热门文章

最新文章