VUE 入门级教程:开启 Vue.js 编程之旅
一、Vue.js 简介
Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发,能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层,通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新,让开发者可以高效地构建交互性强且易于维护的前端应用。
二、环境搭建
在开始使用 Vue.js 之前,我们需要搭建相应的开发环境。
(一)引入 Vue.js
- 可以直接通过 CDN 引入 Vue.js。在 HTML 页面的
<head>
部分添加以下代码:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
这种方式适用于简单的学习和快速原型开发。
(二)使用 Vue CLI(命令行工具)
- 首先,确保已经安装了 Node.js。然后,在命令行中全局安装 Vue CLI:
npm install -g @vue/cli
- 安装完成后,可以使用
vue create
命令创建一个新的 Vue 项目。例如:
vue create my-vue-project
按照提示选择相应的配置项,如是否使用 Babel、ESLint 等,即可创建一个基于 Vue.js 的基础项目结构。这是开发较为复杂的 Vue 应用的推荐方式,它提供了项目构建、开发服务器、热重载等一系列便捷的功能。
三、Vue 实例
Vue.js 的核心是 Vue 实例。每个 Vue 应用都是通过创建一个新的 Vue 实例来启动的。
// 创建一个 Vue 实例
var vm = new Vue({// 选项对象el: '#app',data: {message: 'Hello, Vue!'}
});
在上述代码中,el
选项指定了 Vue 实例挂载的 DOM 元素,这里是id
为app
的元素。data
选项是一个对象,用于存储应用的数据。在这个例子中,message
是一个数据属性,其值为Hello, Vue!
。
四、数据绑定
Vue.js 最强大的特性之一就是数据绑定,它实现了数据与 DOM 的双向数据绑定,当数据发生变化时,DOM 会自动更新,反之亦然。
(一)文本插值
使用双花括号{{ }}
进行文本插值,可以将数据渲染到 HTML 页面中。例如:
<div id="app"><p>{{ message }}</p>
</div>
当 Vue 实例中的message
数据发生变化时,页面中的文本也会随之更新。
(二)指令绑定
Vue.js 提供了一系列指令来实现更丰富的 DOM 操作。
v-bind
指令:用于绑定 HTML 属性。例如,绑定src
属性:
<img v-bind:src="imageUrl">
这里imageUrl
是 Vue 实例data
中的一个属性,当imageUrl
的值改变时,图片的src
属性也会相应改变。可以简写为:src
,如<img :src="imageUrl">
。
v-on
指令:用于绑定事件监听器。例如,绑定点击事件:
<button v-on:click="handleClick">点击我</button>
当按钮被点击时,会调用 Vue 实例中定义的handleClick
方法。简写为@click
,即<button @click="handleClick">点击我</button>
。
五、条件渲染与列表渲染
(一)条件渲染
v-if
指令:根据表达式的值来决定是否渲染元素。例如:
<div v-if="isShow"><p>只有当 isShow 为 true 时才会显示</p>
</div>
当isShow
为true
时,<div>
及其内部元素才会被渲染到页面中;否则,不会显示。
v-else
指令:与v-if
配合使用,用于在v-if
条件不满足时渲染另一个元素。例如:
<div v-if="isShow"><p>显示内容 1</p>
</div>
<div v-else><p>显示内容 2</p>
</div>
v-else-if
指令:可以在多个条件判断中使用,例如:
<div v-if="score >= 90"><p>优秀</p>
</div>
<div v-else-if="score >= 80"><p>良好</p>
</div>
<div v-else-if="score >= 60"><p>及格</p>
</div>
<div v-else><p>不及格</p>
</div>
(二)列表渲染
v-for
指令:用于遍历数组或对象,并渲染相应的元素。例如,遍历一个数组:
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
这里items
是 Vue 实例data
中的一个数组,v-for
会遍历items
数组,为每个元素创建一个<li>
元素,并将item.name
渲染到<li>
中。:key
属性是必需的,它用于帮助 Vue 识别每个节点的身份,提高渲染效率和更新的准确性。
六、组件化开发
Vue.js 鼓励组件化开发,将复杂的应用拆分成多个独立的、可复用的组件,每个组件都有自己的模板、数据和逻辑。
(一)创建组件
// 定义一个名为 MyComponent 的组件
Vue.component('my-component', {template: '<div><h3>这是我的组件</h3><p>{{ componentMessage }}</p></div>',data: function() {return {componentMessage: '组件数据'};}
});
(二)使用组件
在 HTML 模板中使用组件:
<div id="app"><my-component></my-component>
</div>
当页面加载时,<my-component>
标签会被替换为组件的模板内容,并显示相应的数据。
七、Vue 生命周期钩子
Vue 实例在创建到销毁的过程中会经历一系列的生命周期阶段,每个阶段都有对应的钩子函数,可以在这些函数中执行特定的操作。
例如:
created
钩子:在实例创建完成后立即调用,此时数据观测、事件配置等都已完成,但 DOM 尚未挂载。可以在这个阶段进行数据的初始化操作。
new Vue({el: '#app',data: {//...},created: function() {// 在这里进行数据初始化等操作console.log('实例已创建');}
});
mounted
钩子:在实例挂载到 DOM 后调用,此时可以访问到 DOM 元素。通常在这个阶段进行一些需要 DOM 操作的初始化,如获取元素的高度、宽度等。
mounted: function() {// 可以在这里操作 DOMvar element = this.$el;console.log('实例已挂载到 DOM,元素高度为:', element.offsetHeight);
}
相关文章:

VUE 入门级教程:开启 Vue.js 编程之旅
一、Vue.js 简介 Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发,能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层,通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新,让开发者可以高效地…...

Ubantu系统docker运行成功拉取失败【成功解决】
解决docker运行成功拉取失败 失败报错 skysky-Legion-Y7000-IRX9:~$ docker run hello-world docker: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head “http://%2Fvar%2Frun%2Fdocker.sock/_ping”: dial uni…...

mvn-mac操作小记
1.安装brew 如果报错,Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc,最后一行追加 export PATH“/opt/homebrew/bin:$PATH” source ~/.zshrc 2.安装brew install maven mvn -version查看路径 Maven home: /opt/homebrew/Cellar/mav…...

机器学习——生成对抗网络(GANs):原理、进展与应用前景分析
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一. 生成对抗网络的基本原理二. 使用步骤2.1 对抗性训练2.2 损失函数 三. GAN的变种和进展四. 生成对抗网络的应用五. 持续挑战与未来发展方向六. 小结 前言 生…...

「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字,应用会判断是否接近目标数字,并提供提示“高一点”或“低一点”,直到用户猜中目标数字。这个小游戏结合状态管理和用户交互,是一个入门级的互动应用示例。 关键词 UI互…...

Ps:存储 Adobe PDF
在 Adobe Photoshop 中,将图像保存为 PDF 文件时, 会弹出“存储 Adobe PDF” Save Adobe PDF对话框。在此对话框中提供了多个选项,用于控制 PDF 文件的输出,包括一般设置(选择预设、兼容性和保留编辑功能)、…...

DDR3保姆级使用教程:ZYNQ 7010
内容:使用DDR3 IP核,向DDR3写入数据,然后再读出数据,通过串口打印。 设备:ZYNQ 7010 xc7z010clg-400-1。软件VIVADO 2018.3 (1)工程模块:一个写FIFO,一个读FIFO。一个ZYNQ IP核&am…...

OpenCV 模板匹配全解析:从单模板到多模板的实战指南
简介:本文深入探讨 OpenCV 中的模板匹配技术。详细介绍构建输入图像与模板图像的步骤,包括读取、截取、滤波与存储等操作。剖析 cv2.matchTemplate 语法及其参数含义,阐述不同匹配方法下结果值的意义。同时讲解 cv2.minMaxLoc 语法࿰…...

【JAVA] 杂谈: java中的拷贝(克隆方法)
这篇文章我们来介绍什么是拷贝,并且实现浅拷贝到深拷贝。 目录 一、浅拷贝 1.1 clone 方法 1.2 实现浅拷贝: 1.2.1 重写 clone方法 1.2.2 实现接口 Cloneable 1.2.3 调用克隆方法 1.2.4 原理图: 1.3 浅拷贝的不足 1.3.1 增加引用…...

使用 PDF API 合并 PDF 文件
内容来源: 如何在 Mac 上合并 PDF 文件 1. 注册与认证 您可以注册一个免费的 ComPDFKit API 帐户,该帐户允许您在 30 天内免费无限制地处理 1,000 多个文档。 ComPDFKit API 使用 JSON Web Tokens 方法进行安全身份验证。从控制面板获取您的公钥和密钥&…...

关于BeanUtils.copyProperties是否能正常复制字段【详细版】
话不多说!先总结: 1、字段相同,类型不同(不复制,也不报错) 2、子类父类 (1)子类传给父类(可以正常复制) (2)父类传给子类(可以正常复制) 3、子类父类&#x…...

爬虫框架快速入门——Scrapy
适用人群:零基础、对网络爬虫有兴趣但不知道从何开始的小白。 什么是 Scrapy? Scrapy 是一个基于 Python 的网络爬虫框架,它能帮助你快速爬取网站上的数据,并将数据保存到文件或数据库中。 特点: 高效:支…...

鸿蒙开发-HMS Kit能力集(应用内支付、推送服务)
1 应用内支付 开发步骤 步骤一:判断当前登录的华为账号所在服务地是否支持应用内支付 在使用应用内支付之前,您的应用需要向IAP Kit发送queryEnvironmentStatus请求,以此判断用户当前登录的华为帐号所在的服务地是否在IAP Kit支持结算的国…...

TYUT设计模式大题
对比简单工厂,工厂方法,抽象工厂模式 比较安全组合模式和透明组合模式 安全组合模式容器节点有管理子部件的方法,而叶子节点没有,防止在用户在叶子节点上调用不适当的方法,保证了的安全性,防止叶子节点暴露…...

Webman中实现定时任务
文章目录 Webman中实现定时任务一、引言二、安装与配置1、安装Crontab组件2、创建进程文件3、配置进程文件随Webman启动4、重启Webman5、Cron表达式(补充)例子 三、使用示例四、总结 Webman中实现定时任务 一、引言 在现代的后端开发中,定时…...

《以 C++破局:人工智能系统可解释性的探索与实现》
在当今科技飞速发展的时代,人工智能已深度融入我们的生活,从医疗诊断到金融决策,从交通管控到司法审判,其影响力无处不在。然而,在这些涉及重大利益和社会影响的关键领域,人工智能系统却面临着严峻的信任危…...

C++:QTableWidget删除选中行(单行,多行即可)
转自博客: Qt C -在QTableWidget中删除行 - 腾讯云开发者社区 - 腾讯云 我的界面: 采集机器人位置和姿态信息并写入QTableWidget控件中 删除代码: 1.获取要删除行的索引 2.删除行 QList<QTableWidgetItem*> items ui->tableW…...

C++类中多线程的编码方式
问题 在C++代码中,一般的代码是需要封装在类里面,比如对象,方法等。否则就不能很好的利用C++面向对象的能力了。 但是这个方式在处理线程时会碰到一个问题。 考虑下面一个简单的场景: class demoC { public:std::thread t;int x;void threadFunc(){std::cout<<x&…...

数据湖的概念(包含数据中台、数据湖、数据仓库、数据集市的区别)--了解数据湖,这一篇就够了
文章目录 一、数据湖概念1、企业对数据的困扰2、什么是数据湖3、数据中台、数据湖、数据仓库、数据集市的区别 网上看了好多有关数据湖的帖子,还有数据中台、数据湖、数据仓库、数据集市的区别的帖子,发现帖子写的都很多,而且专业名词很多&am…...

EDKII之安全启动详细介绍
文章目录 安全启动简介安全启动流程介绍签名过程BIOS实现小结 安全启动简介 安全启动(Secure Boot)是一种计算机系统的安全功能,旨在确保系统启动过程中只能加载经过数字签名的受信任的操作系统和启动加载程序。通过使用安全启动,…...

原生js上传图片
无样式上传图片 创建一个 FormData 对象:这个对象可以用于存储数据。 将文件添加到 FormData 对象:通过 append() 方法,将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求:使用 fetch API 或者其他方法将 FormDat…...

使用torch==2.5.1版本用的清华源遇到的坑
解决安装torch后,torch.cuda.is_available()结果为false的问题 清华源下载到的torch2.5.1版本的Lib\site-packages\torch\version.py 其中,清华源指的是: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorchhttps://mirrors.tuna.tsinghua.…...

泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用
免责声明 学习视频来自 B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 泷羽sec官网:http…...

对拍详细使用方法
对拍的作用 对于我们在学校OJ,cf,牛客…各种只提供少量测试数据的题目,常常交上代码常常超时,能写出正确的暴力代码而题目要求的时间复杂度更低。然而这时你写出了能通过样例且时间复杂度更低的代码,但交上去就是错误…...

Python面向对象编程与模块化设计练习
需求: 编写一个BankAccount类,模拟银行账户功能: 属性:账户名、余额 方法:存款、取款、查询余额 使用模块将类和测试代码分离。 模块文件:bank_account.py 该模块包含 BankAccount 类。 class BankAccoun…...

Linux系统硬件老化测试脚本:自动化负载与监控
简介: 这篇文章介绍了一款用于Linux系统的自动化硬件老化测试脚本。该脚本能够通过对CPU、内存、硬盘和GPU进行高强度负载测试,持续运行设定的时长(如1小时),以模拟长时间高负荷运行的环境,从而验证硬件的稳…...

搭建一个基于Web的文档管理系统,用于存储、共享和协作编辑文档
搭建一个基于Web的文档管理系统,用于存储、共享和协作编辑文档 本项目采用以下架构: NFS服务器: 负责存储文档资料。Web服务器: 负责提供文档访问和编辑功能。SELinux: 负责权限控制,确保文档安全。Git服务器: 负责存储文档版本历史&#x…...

排序学习整理(1)
1.排序的概念及运用 1.1概念 排序:所谓排序,就是使⼀串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作,以便更容易查找、组织或分析数据。 1.2运用 购物筛选排序 院校排名 1.3常见排序算法 2.实…...

《深入探究 Java 中的 boolean 类型》
在 Java 编程语言的世界里,boolean 类型虽然看似简单,却在程序的逻辑控制和决策中起着至关重要的作用。本文将带你深入了解 Java 中的 boolean 类型,从其基本概念、用法到实际应用场景,以及一些常见的注意事项。 一、boolean 类型…...

智享 AI 自动无人直播系统:打破地域与时间枷锁中小微企业的营销破局利器
中小微企业,在商业浪潮中恰似逐浪扁舟,常面临营销成本高、推广渠道窄、专业人才缺等 “暗礁”,而智享 AI 自动无人直播系统恰如精准导航的灯塔,助其破浪前行、突出重围。 成本维度,传统直播人力成本让中小微企业望而却…...