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

初学vue.js

news 2025/12/17 6:33:16

准备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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/12/16 13:42:29

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/9/14 7:59:52

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/17 1:57:24

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/10 4:51:15

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展扩展入口文件文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24