初学vuejs

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

现在的前端,各种框架各种语言层出不穷,其目的都是为了解决问题而出现的,在越来越发达的移动端上当然也少不了框架的应用了,其中用的最多也最出名的三大框架就是Angularreactvue了,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还远远不止这些,更精彩的还在后面。。。

目录
相关文章
|
3天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
271 116
|
18天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
12天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
663 219
|
5天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
349 34
Meta SAM3开源:让图像分割,听懂你的话
|
10天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1575 157
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
897 61
|
7天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
295 140