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

初学vue.js

news 2026/2/8 9:50:17

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

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/12/10 6:18:55

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】：开启编程世界的奇妙冒险嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

【C++进阶篇】智能指针

C内存管理终极指南：智能指针从入门到源码剖析一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏五. 最后一. 智能指针智能指…...

编程新知 2026/1/31 8:16:58

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。基本介绍主要特点类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

tomcat指定使用的jdk版本

说明有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置设置方式找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11