当前位置：首页 > news >正文

初学vue.js

news 2025/6/29 11:24:32

准备Vue.js环境

① 下载环境：

javaScript语言的程序包：外部js文件
对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。
Vue框架的js文件获取:
官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
②导入环境
在工程目录下创建script目录用来存放vue.js文件

将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中
③ 在html文件当中导入Vue.js文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script src="/pro03-vue/script/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"></script>
</html>

Vue.js基本语法：声明式渲染

①HTML代码

<!-- 使用{{}}格式，指定要被渲染的数据 --><div id="app">{{message}}</div>

②vue代码

// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {// el用于指定Vue对象要关联的HTML元素。el就是element的缩写// 通过id属性值指定HTML元素时，语法格式是：#id"el":"#app",// data属性设置了Vue对象中保存的数据"data":{"message":"Hello Vue!"}
};// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

运行结果：
在这里插入图片描述

绑定元素属性

v-bind:HTML标签的原始属性名
①HTML代码

<div id="app"><!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 --><!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 --><input type="text" v-bind:value="vueValue" /><!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； --><!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 --><p>{{vueValue}}</p>
</div>

这里的v-bind:value 可以简写成 :value

②Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});

运行结果：在这里插入图片描述

双向数据绑定

①HTML代码

<div id="app"><!-- v-bind:属性名 效果是从Vue对象渲染到页面 --><!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 --><input type="text" v-model:value="vueValue" /><p>{{vueValue}}</p>
</div>

②Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});

文本框里面的字母改变这个下面会跟着改变，已经与文本框里的绑定了。
在这里插入图片描述
①注意：:value可以省略

<input type="text" v-model="vueValue" />

②.trim修饰符
实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。

<input type="text" v-model.trim="vueValue" />

Vue会帮助我们在文本框失去焦点时自动去除前后空格。

条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。
1、v-if

①HTML代码

	<div id="app"><h3>if</h3><div v-if="flag"  style="background: red; height:100px;width:100px "></div><div v-if="!flag" style="background: blue; height:100px;width:100px"></div></div>

②Vue代码

var app = new Vue({"el":"#app","data":{"flag":true}});

输出结果展示红色的方块。
在这里插入图片描述

2、v-if和v-else
①HTML代码

<div id="app02"><h3>if/else</h3><div v-if="flag"  style="background: red; height:100px;width:100px "></div><div v-else="flag" style="background: blue; height:100px;width:100px"></div>
</div>

②Vue代码

var app02 = new Vue({"el":"#app02","data":{"flag":true}});

在这里插入图片描述

注意：中见有其他节点会影响，else 之后的节点。
3、v-show
①HTML代码

<div id="app03"><h3>v-show</h3><div v-show="flag"  style="background: red; height:100px;width:100px "></div>
</div>

②Vue代码

var app03 = new Vue({"el":"#app03","data":{"flag":true}});

注意：这个属性是在后面添加了隐藏属性
在这里插入图片描述

列表渲染

1、迭代一个简单的数组

<div id="app01"><ul><!-- 使用v-for语法遍历数组 --><!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 --><!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 --><li v-for="fruit in fruitList">{{fruit}}</li></ul>
</div>

②Vue代码

var app01 = new Vue({"el":"#app01","data":{"fruitList": ["apple","banana","orange","grape","dragonfruit"]}
});

在这里插入图片描述

2、迭代一个对象数组
①HTML代码

<div id="app"><table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr></table>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"employeeList":[{"empId":11,"empName":"tom","empAge":111,"empSubject":"java"},{"empId":22,"empName":"jerry","empAge":222,"empSubject":"php"},{"empId":33,"empName":"bob","empAge":333,"empSubject":"python"}]}
});

在这里插入图片描述

事件驱动

1、demo：字符串顺序反转
①HTML代码

<div id="app"><p>{{message}}</p><!-- v-on:事件类型="事件响应函数的函数名" --><button v-on:click="reverseMessage">Click me,reverse message</button>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"message":"Hello Vue!"				},"methods":{"reverseMessage":function(){this.message = this.message.split("").reverse().join("");}}
});

在这里插入图片描述

2、demo：获取鼠标移动时的坐标信息
①HTML代码

<div id="app"><div id="area" v-on:mousemove="recordPosition" style="background:aqua;width: 400px;height: 500px;"></div><p id="showPosition">{{position}}</p>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"position":"暂时没有获取到鼠标的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}
});

在这里插入图片描述
v-on的简化写法
正常写法：

<button v-on:click="sayHello">SayHello</button>

简化以后：

<button @click="sayHello">SayHello</button>

侦听属性

1、提出需求

<div id="app"><p>尊姓：{{firstName}}</p><p>大名：{{lastName}}</p>尊姓：<input type="text" v-model="firstName" /><br/>大名：<input type="text" v-model="lastName" /><br/><p>全名：{{fullName}}</p>
</div>

在上面代码的基础上，我们希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。

具体来说，所谓『侦听』就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用我们准备好的函数。
2、Vue代码
在watch属性中声明对firstName和lastName属性进行『侦听』的函数：

var app = new Vue({"el":"#app","data":{"firstName":"jim","lastName":"green","fullName":"jim green"},"watch":{"firstName":function(inputValue){this.fullName = inputValue + " " + this.lastName;},"lastName":function(inputValue){this.fullName = this.firstName + " " + inputValue;}}
});

练习

1、功能效果演示
在这里插入图片描述
第一步：显示表格
①HTML标签

<table id="appTable"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr>
</table>

②Vue代码

var appTable = new Vue({"el": "#appTable","data": {"employeeList": [{"empId": 1,"empName": "tom","empAge": 11,"empSubject": "java"},{"empId": 2,"empName": "jerry","empAge": 22,"empSubject": "php"},{"empId": 3,"empName": "peter","empAge": 33,"empSubject": "python"}]}
});

第二步：显示四个文本框
①HTML标签

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" /><br/>姓名：<input type="text" v-model="empName" /><br/>年龄：<input type="text" v-model="empAge" /><br/>专业：<input type="text" v-model="empSubject" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><!-- 第三部分：按钮 --></div>

②Vue代码

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""}
});

第三步：创建一个p标签
HTML标签：

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按钮 --></div>

第四步：点击添加记录按钮
第一小步：给按钮设置事件驱动
[1]HTML标签

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按钮 --><button type="button" v-on:click="addRecord">添加记录</button></div>

[2]Vue代码

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我点击了那个按钮……");}}
});

②第二小步：打印一下文本框输入的数据

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我点击了那个按钮……");console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);}}
});

③第三小步：将收集到的数据添加到表格中

"addRecord":function(){// 确认单击事件是否绑定成功console.log("我点击了那个按钮……");// 确认是否能够正确收集到文本框数据console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);// 将收集到的文本框数据封装为一个对象var employee = {"empId":this.empId,"empName":this.empName,"empAge":this.empAge,"empSubject":this.empSubject};// 将上面的对象压入表格数据的employeeList数组appTable.employeeList.push(employee);
}

在这里插入图片描述

初学vue.js

准备Vue.js环境 ① 下载环境： javaScript语言的程序包：外部js文件对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。 Vue框架的js文件获取: 官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js ②导入环境…...

编程日记 2023/9/26 5:25:15

React的thunk中间件

Thunk 是一种中间件，它可以在 Redux 中处理异步操作。Thunk 中间件允许你在 action 中返回一个函数，而不仅仅是一个普通的 action 对象。这个返回的函数可以接收 dispatch 和 getState 作为参数，并且可以在函数内部进行异步操作。当使用 Thun…...

编程日记 2023/9/26 5:24:14

数组初学者向导：使用Python从零开始制作经典战舰游戏

引言战舰游戏，一个广受欢迎的经典游戏，为玩家提供了策略与猜测的完美结合。这个游戏的核心思想是通过猜测敌方船只的位置并尝试击沉它们来赢得比赛。在这篇文章中，我们将使用Python语言和数组来构建这款游戏，让你更加了解数组的…...

编程日记 2023/9/26 5:22:12

【STM32】IAP升级预备知识

IAP（In Application Programming）简介 Flash够大的情况下，上电后的程序通过修改 MSP 的方式，可以在一块Flash上存在多个功能差异的程序。 IAP是为了在执行正常功能前，为了升级功能，提前运行的一段程序。这…...

编程日记 2023/9/26 5:21:11

asp.net网站的建立及运行

点击创建新项目在输入框中输入asp.net，并选择图中的点击下一步点击创建然后，右键，添加，新建项选择web窗体点击添加点击视图，工具箱选择一个label，记住这个id 空白处右键，查看代码添…...

编程日记 2023/9/26 5:20:11

怎么把webm转换成mp4？

怎么把webm转换成mp4？与MP4这位视频格式大哥相比，Webm这种视频格式还有很多小伙伴对它不太熟悉，因为大家平时也是偶尔才能接触到，属于不常用的视频格式。Webm是一种开放、免费的媒体文件格式，尽管如今它的应用范围比以…...

编程日记 2023/9/26 5:19:10

RabbitMQ 消息应答

每日一句物是人非事事休，欲语泪先流。概述为了保证消息在发送过程中不丢失，RabbitMQ引入了消息应答机制，消费者在接收到消息并且处理该消息后，告诉RabbitMQ它已经处理了，RabbitMQ可以把消息删除了。自动应答消息发送后立即被认为已经传送成功，这种模式需要在…...

编程日记 2023/9/26 5:16:07

【C++】C++ 类中的 this 指针用法 ③ ( 全局函数与成员函数相互转化 | 有参构造函数设置默认参数值 | 返回匿名对象与返回引用 )

文章目录一、全局函数与成员函数相互转化1、成员函数转为全局函数 - 多了一个参数2、全局函数转为成员函数 - 通过 this 指针隐藏操作数二、有参构造函数设置默认参数值三、返回匿名对象与返回引用四、完整代码示例一、全局函数与成员函数相互转化 1、成员函数转为全局…...

编程日记 2023/9/26 5:15:06

游戏遇到的问题

天涯明月刀就是天刀的假全屏，很多天刀玩家可能玩其他游戏比较少或者对电脑了解不多，不在意帧数，但是肯定还是有一部分玩家发现了这个问题，就是“我使命召唤12都能跑到60帧的机器跑个破天刀40帧甚至30帧?”问题何在呢&#xff1…...

编程日记 2023/9/26 5:14:05

高性能系统的性能优化技巧：从专家的经验中学习 | 开源日报 No.40

binhnguyennus/awesome-scalability Stars: 48.3k License: MIT 这个项目是一个阅读列表，用于说明可扩展、可靠和高性能大规模系统的模式。该项目通过知名工程师的文章和可信参考资料来解释概念，并从为数以百万计甚至十亿用户提供服务的经过实战验证的系…...

编程日记 2023/9/26 5:13:04

Linux系统编程——进程间通信的学习

学习参考博文： 进程间的五种通信方式介绍Linux 信号介绍 Linux系统编程学习相关博文 Linux系统编程——文件编程的学习Linux系统编程——进程的学习Linux系统编程——线程的学习Linux系统编程——网络编程的学习 Linux系统编程——进程间通信的学习一、概述1. 无…...

编程日记 2023/9/26 5:12:03

人工智能AI 全栈体系（六）

第一章神经网络是如何实现的这些年神经网络的发展越来越复杂，应用领域越来越广，性能也越来越好，但是训练方法还是依靠 BP 算法。也有一些对 BP 算法的改进算法，但是大体思路基本是一样的，只是对 BP 算法个别地方的一…...

编程日记 2023/9/26 5:11:02

NPDP是什么？考了有用吗？

1）NPDP是什么？ NPDP，全称为New Product Development Professional，即新产品开发专业人员。NPDP认证是由世界产品开发协会（PDMA）推出的一项专业认证。它旨在评估和认可个人在新产品开发领域的专业知识和技能…...

编程日记 2023/9/26 5:09:00

关于安卓SVGA浅尝（二）加载数据

关于安卓SVGA浅尝（二）加载数据相关链接 SVGA官网 SVGA-github说明文档背景项目开发，都会和动画打交道，动画的方案选取，就有很多选择。如Json动画，svga动画，gif等等。各有各的优势。目前项…...

编程日记 2023/9/26 5:06:59

使用matlab产生二维动态曲线视频文件具体举例

使用matlab产生二维动态曲线视频文件举例在进行有些函数变化过程时候，需要用到直观的动态显示，本博文将举例说明利用Matlab编程进行二维动态曲线的生成视频文件。一、问题描述利用matlab编程实现 y 1 s i n ( t ) , y 2 c o s ( t ) , y 3 s i …...

编程日记 2023/9/26 5:05:57

Selenium自动化测试框架常见异常分析及解决方法

01 pycharm中导入selenium报错现象: pycharm中输入from selenium import webdriver, selenium标红原因1: pycharm使用的虚拟环境中没有安装selenium, 解决方法: 在pycharm中通过设置或terminal面板重新安装selenium 原因2: 当前项目下有selenium.py,和系统包名冲突导致, …...

编程日记 2023/9/26 5:04:57

[TI] [Textual Inversion] An image is worth an word

自己的理解： 根据几个图像，找出来一个关键字可以代表它们，然后我们可以再用这个关键字去生成新的东西。提出关键字 1 Introduction word->token->embedding Textual Inversion过程需要： ① a fixed, pre-trained text…...

编程日记 2023/9/26 5:02:55

remote: The project you were looking for could not be found

git拉取公司项目时报错： remote: The project you were looking for could not be found 发生这个问题的原因，在于git账号可能并未真正登录。我们可以通过打开电脑的凭据管理器，查看git当前的登录是否正常。参考链接：参考...

编程日记 2023/9/26 5:01:54

https跳过SSL认证时是不是就是不加密的,相当于http?

https跳过SSL认证时是不是就是不加密的,相当于http?，其实不是，HTTPS跳过SSL认证并不相当于HTTP，也不意味着没有加密。请注意以下几点： HTTPS（Hypertext Transfer Protocol Secure）本质上是在HTTP的基础上…...

编程日记 2023/9/26 4:59:51

linux下链接

linux下链接用法 ln链接格式与介绍 linux下链接用法一、链接的使用格式二、链接的介绍一、链接的使用格式链接： 格式： ln 源文件链接文件硬链接 ln -s 源文件链接文件软连接硬链接文件占磁盘空间但是删除源文件不会影响硬链接文件软链接文件不…...

编程日记 2023/9/26 4:58:51

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2025/6/27 10:15:45

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/6/29 5:59:21

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下：隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2025/6/21 18:39:29

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/20 18:06:08

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...

编程新知 2025/6/24 1:02:30

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/6/15 13:02:49

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/6/25 7:35:04

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。下面我们详细展开对比。 Redis Pub/Sub 的核心特点它是一个发后…...

编程新知 2025/6/21 2:22:29

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础目录一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看四. 文件编辑4.1 Ctrl K 复制和 Ctrl U 粘贴4.2 Alt/Esc U 撤回五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/6/25 22:47:37

准备Vue.js环境

Vue.js基本语法：声明式渲染

绑定元素属性

双向数据绑定

条件渲染

列表渲染

事件驱动

侦听属性

练习

相关文章：