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

初学vue.js

news 2025/10/12 3:45:10

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

微信小程序之bind和catch

这两个呢，都是绑定事件用的，具体使用有些小区别。官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...

编程新知 2025/10/8 21:15:08

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2025/10/10 10:43:42

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/9/11 12:55:04

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/7/23 10:55:13

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2025/6/16 23:36:50

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/9/29 19:03:00

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/6/16 16:58:04

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/9/28 3:38:40